我试图做一个简单的textarea与“剩余许多字符”以及验证。
当我使用ng-maxlength验证表单时,一旦长度达到最大长度,它将立即重置我的字符计数。这是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个字符时,result
变为undefined
-这就是ng-min/maxlength
指令的工作方式。我认为您必须编写自己的指令。这是一条指令,它将在15个字符后阻止输入:
<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);
}
};
});
fiddle
更新:以允许超过15个字符,但是当计数超过15个时禁用提交按钮:
link: function (scope, element, attrs, ngModelCtrl) {
var maxlength = Number(attrs.myMaxlength);
function fromUser(text) {
ngModelCtrl.$setValidity('unique', text.length <= maxlength);
return text;
}
ngModelCtrl.$parsers.push(fromUser);
}
fiddle