Question

我正面临一个奇怪的“错误”。我有一个带有文本区域的表单，上面有一个minlength和一个maxlength验证。

此外，还有一个超级简单的字符左侧计数器：

<textarea ng-trim="false" ng-model="form.text" minlength="20" maxlength="240"></textarea>
<p>{{240 - form.text.length}} left</p>

我不知道为什么为什么我的计数器只有在字符达到最小长度值后才开始工作...在键入计数器时将其固定为240。在达到20个字符后，计数器跳至220 ...这里出了什么问题？

Pen example

Answer 1

诸如ng-minlength之类的基本验证指令将阻止ngModel进行更新，直到通过验证为止。它本身并不是一个bug，它在许多情况下很有用，但在某些情况下也没有用。这样的。

要解决此问题，同时仍保留使用基于ngModel的验证（包括表单有效性等）的好处，是使用$setValidity来“手动”设置验证步骤。为此，您将删除ng-minlength属性并使用ng-change回调。

您还需要确保您的form元素已命名并且是已命名表单的一部分，以便能够访问相关的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以创建一个有效的示例here。在那里，我还向模板添加了一点以显示有效性状态。

Answer 2

这可能是因为在您达到最小长度之前，angular不会将文本区域的内部状态保存到其form.text变量中。通过将<p>标签的内部文本从form.text.length更改为form.text，很容易验证这一点。

如果可能的话，我将从您的textarea中删除minlength属性，并在以后的验证步骤中添加它-通过跟踪它来肯定地以某种方式在屏幕上通知用户。

Angularjs minlength验证停止字符计数器

2 个答案: