Счетчик остановок символов проверки длины волны Angularjs

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 ... Что здесь происходит не так?

Пример пера

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

Я раздвоил ваш кодовый блок, чтобы создать рабочий пример здесь .Там я также добавил немного в шаблон, чтобы показать состояние действительности.

Answer 2

Вероятно, это связано с тем, что angular не сохраняет внутреннее состояние текстовой области в свою переменную form.text, пока не достигнет минимальной длины. Это должно быть очень легко проверить, изменив внутренний текст тега <p> с form.text.length на form.text.

Если это вообще возможно, я бы удалил атрибут minlength из вашей текстовой области и добавил бы его в качестве шага проверки позже - Определенно информируйте пользователя с помощью метки на экране, хотя и отслеживая ее.