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">

    <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);

     }

  }

我分叉了你的 codepen 在这里创建了一个工作示例。我还在模板中添加了一些内容以显示有效性状态。

Answer 2

这可能是因为form.text在达到 minlength 之前，angular 不会将 textarea 的内部状态保存到其变量中。这应该是很容易通过改变来验证这个<p>来自标签的内部文本form.text.length来form.text。

如果可能的话，我会从你的 textarea 中删除 minlength 属性，并在稍后添加它作为验证步骤 - 尽管通过跟踪它在屏幕上以某种方式通知用户。