Riz*_*Riz 35 angularjs ng-maxlength
我正在尝试做一个简单的textarea,"剩下这么多字符"以及验证.当我使用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>
Mar*_*cok 56
当你的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);
}
};
});
更新:允许超过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);
}
Tha*_* K. 52
或者,您可以添加标准html maxlength属性ng-maxlength.
<form name="myForm">
<textarea name="myTextarea" ng-maxlength="15" maxlength="15" ng-model="result"></textarea>
<span class="error" ng-show="myForm.myTextarea.$error.maxlength">
Reached limit!
</span>
</form>
这将以"15"字符截止maxlength,一如既往,此外ng-maxlength,您可以在达到限制时显示自定义消息.
小智 17
如果向textarea添加name属性,则会在表单范围内创建具有该值的新属性,您可以使用该属性获取字符计数器的长度.
<body ng-controller="MainCtrl">
<div ng-form="noteForm">
<textarea ng-maxlength="15" name="noteItem" ng-model="result"></textarea>
<p>{{15 - noteForm.noteItem.$viewValue.length}} chars remaining</p>
<button ng-disabled="!noteForm.$valid">Submit</button>
</div>
</body>
更新了你的plnkr
小智 14
正如文档所说,$ validate函数在有效性变为无效时将模型设置为未定义.
但是,我们仍然可以通过添加allowInvalid: true到ng-model-options来防止这种行为.
所以,只需修改你的代码,如:
<body ng-controller="MainCtrl">
<div ng-form="noteForm">
<textarea ng-maxlength="15" ng-model="result"
ng-model-options="{ allowInvalid: true }"></textarea>
<p>{{15 - result.length}} chars remaining</p>
<button ng-disabled="!noteForm.$valid">Submit</button>
</div>
</body>