Angularjs 最小长度验证停止字符计数器

Question

我正面临一个奇怪的“错误”。我有一个带有文本区域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......这里出了什么问题？

Answer 1

基本验证指令（例如）ng-minlength将阻止 ngModel 更新，直到验证通过。它本身不是一个错误，它在许多情况下很有用，但在某些情况下也可能不太有用。比如这个。在保持使用基于 ngModel 的验证（包括表单有效性等）的好处的同时，解决此问题的方法是使用$setValidity. 为此，您将删除该ng-minlength属性并使用ng-change回调。您还需要确保您的表单元素已命名并且是已命名表单的一部分，以便访问相关的 ngModelController。<form name="formCtrl">&nbsp; &nbsp; <textarea ng-trim="false"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ng-model="form.text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ng-change="checkTextLength()"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="formText">&nbsp; &nbsp; </textarea>&nbsp; &nbsp; <p>{{240 - form.text.length}} left</p></form>然后在您的控制器中，假设您只是$scope在这里使用：&nbsp; $scope.checkTextLength = function(){&nbsp; &nbsp; &nbsp;if($scope.form.text.length < 20){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.formCtrl.formText.$setValidity('minlength', false);&nbsp; &nbsp; &nbsp;} else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.formCtrl.formText.$setValidity('minlength', true);&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; if($scope.form.text.length > 240){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.formCtrl.formText.$setValidity('maxlength', false);&nbsp; &nbsp; &nbsp;} else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.formCtrl.formText.$setValidity('maxlength', true);&nbsp; &nbsp; &nbsp;}&nbsp; }我分叉了你的 codepen 在这里创建了一个工作示例。我还在模板中添加了一些内容以显示有效性状态。

Answer 2

这可能是因为form.text在达到 minlength 之前，angular 不会将 textarea 的内部状态保存到其变量中。这应该是很容易通过改变来验证这个<p>来自标签的内部文本form.text.length来form.text。如果可能的话，我会从你的 textarea 中删除 minlength 属性，并在稍后添加它作为验证步骤 - 尽管通过跟踪它在屏幕上以某种方式通知用户。