我试图做一个简单的textarea与“这么多的字符剩余”以及验证。
当我使用ng-maxlength验证我的表单时,它会在长度达到最大长度后立即重置我的charcount。这是 plunkr任何解决方法?
当我使用ng-maxlength验证我的表单时,它会在长度达到最大长度后立即重置我的charcount。这是 plunkr任何解决方法?
<body ng-controller="MainCtrl"> <div ng-form="noteForm"> <textarea ng-maxlength="15" ng-model="result"></textarea> <p>{{15 - result.length}} chars remaining</p> <button ng-disabled="!noteForm.$valid">Submit</button> </div> </body>
当你的textarea超过15个字符,结果变成未定义 – 这就是ng-min / maxlength指令的工作原理。我想你必须编写自己的指令。这里是一个指令,将在15个字符后阻止输入:
原文链接:https://www.f2er.com/angularjs/145945.html<textarea my-maxlength="15" ng-model="result"></textarea>
app.directive('myMaxlength',function() { return { require: 'ngModel',link: function (scope,element,attrs,ngModelCtrl) { var maxlength = Number(attrs.myMaxlength); function fromUser(text) { if (text.length > maxlength) { var transformedInput = text.substring(0,maxlength); ngModelCtrl.$setViewValue(transformedInput); ngModelCtrl.$render(); return transformedInput; } return text; } ngModelCtrl.$parsers.push(fromUser); } }; });
更新:允许超过15个字符,但是当计数超过15时禁用提交按钮:
link: function (scope,ngModelCtrl) { var maxlength = Number(attrs.myMaxlength); function fromUser(text) { ngModelCtrl.$setValidity('unique',text.length <= maxlength); return text; } ngModelCtrl.$parsers.push(fromUser); }