Angularjs minlength验证停止字符计数器
我正面临着一个奇怪的“虫子”。我有一个带有文本区域的表单，上面有一个minlength和一个maxlength验证。
此外，还有一个超级简单的左字符计数器：
<textarea ng-trim="false" ng-model="form.text" minlength="20" maxlength="240"></textarea>
<p>{{240 - form.text.length}} left</p>我不知道为什么我的计数器只有在字符达到minlength值后才开始工作...而打字时，计数器停留在240。当我达到20个字符后，计数器跳到220...这里出了什么问题？
回答 2
Stack Overflow用户
发布于 2019-05-27 00:42:46
基本验证指令(如ng-minlength )将阻止ngModel在验证通过之前进行更新。它本身不是一个bug，在许多情况下是有用的，但在某些情况下也不是那么有用。就像这样。
在保留使用基于ngModel的验证的好处(包括表单有效性等)的同时，绕过这个问题的方法是使用$setValidity“手动”设置验证步骤。为此，您需要删除ng-minlength属性并使用ng-change回调。
您还需要确保您的表单元素已命名，并且是已命名表单的一部分，以便访问相关的ngModelController。
<form name="formCtrl">
<textarea ng-trim="false"
ng-model="form.text"
ng-change="checkTextLength()"
name="formText">
</textarea>
<p>{{240 - form.text.length}} left</p>
</form>然后在你的控制器中，假设你只是在这里使用$scope：
$scope.checkTextLength = function(){
if($scope.form.text.length < 20){
$scope.formCtrl.formText.$setValidity('minlength', false);
} else{
$scope.formCtrl.formText.$setValidity('minlength', true);
}
if($scope.form.text.length > 240){
$scope.formCtrl.formText.$setValidity('maxlength', false);
} else{
$scope.formCtrl.formText.$setValidity('maxlength', true);
}
}我派生了你的代码来创建一个可以工作的示例here。在这里，我还在模板中添加了一些内容，以显示有效性状态。
Stack Overflow用户
发布于 2019-05-26 22:13:26
这可能是因为angular不会将文本区域的内部状态保存到它的form.text变量中，直到你达到最小长度。通过将<p>标记内部文本从form.text.length更改为form.text，应该很容易验证这一点。
如果可能的话，我将从您的文本区域中删除minlength属性，并将其添加为稍后的验证步骤--通过跟踪标签，一定要在屏幕上以某种方式通知用户。
https://stackoverflow.com/questions/56314220
复制相似问题