Угловой наборPristine on ngBlur

Question

• У меня есть форма с полем для пароля, для которого я внедрил директиву password.
• В настоящее время я реализовал только 1 проверку, но у меня есть список проверок в поле.
• Я хочу, чтобы они отображались красным или зеленым цветом в зависимости от действительного/недействительного соответственно - когда пользователь начинает вводить текст в поле. Если пользовательский элемент управления выходит из коробки И все проверки пройдены, я хочу установить поле в действительное и установить его в нетронутое, чтобы список проверки не отображался.

• Однако, если какая-либо проверка не удалась, я хочу, чтобы все они были видны, даже если поле не в фокусе. Ниже приведен фрагмент группы форм.

  <div class="form-group"> 
      <label for="inputPass" class="col-sm-3 control-label text-sm text-left">Password</label> 
      <div class="col-sm-9"> 
      <input type="password" placeholder="Password" 
       class="form-control" ng-model="registerAccount.password" 
       required name="inputPass" id="inputPass" 
       password ng-blur="form.inputPass.$invalid ? return: form.inputPass.$setPristine"> 
      <div ng-show="form.inputPass.$dirty" class="help-block"> 
       <p class="text-danger" ng-show="form.inputPass.$error.required"> 
       Password is required. 
       </p> 
      <p ng-class="form.inputPass.$error.invalidLength ? 'text-danger' : 'text-success'"> 
       Password should be atleast 8 characters. 
      </p> 
      </div> 
  </div> 
  </div> 
  

Ниже моя директива

'use strict'; 

angular.module('nileLeApp') 
.directive('password', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function ($scope, $element, $attrs, ngModelCtrl) { 
      $scope.$watch($attrs.ngModel, function (value) { 

       if (value) { 
        var length = (value.length >= 8); 
        ngModelCtrl.$setValidity('invalidLength', length); 
       } 

      }); 
     } 
    }; 
}); 

Когда фокус из поля, список проверки все еще показывает вверх. Я ожидал, что он будет скрыт, потому что поле настроено на нетронутое. Есть идеи ? Я хотел, чтобы это было похоже на поле пароля в https://dl.dropboxusercontent.com/u/636000/password_verification/index.html. Когда пользователь вводит пароль, валидации отражаются красным/зеленым цветом.

Answer 1

Вы не вызываете метод $setPristine. Должно быть form.inputPass.$setPristine():

ng-blur="form.inputPass.$invalid ? return: form.inputPass.$setPristine()" 

или уборщик изменение:

ng-blur="form.inputPass.$valid && form.inputPass.$setPristine()" 

Answer 2

Вам не нужно использовать специальную директиву:

<form name="testForm"> 
 
    <input ng-model="testVal" name="testVal" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^\w+$/"> 
 
    <div ng-show="testForm.$invalid"> 
 
    <div ng-class="{'errors':testForm.testVal.$error.required,'success':!testForm.testVal.$error.required}">Required</div> 
 
    <div ng-class="{'errors':testForm.testVal.$error.minlength,'success':!testForm.testVal.$error.minlength}">Minlength</div> 
 
    <div ng-class="{'errors':testForm.testVal.$error.maxlength,'success':!testForm.testVal.$error.maxlength}">Maxlength</div> 
 
    <div ng-class="{'errors':testForm.testVal.$error.pattern,'success':!testForm.testVal.$error.pattern}">Pattern</div> 
 
    </div> 
 
</form>

Этот код делает то же самое вещь и дал вам ссылку: dl.dropbo xusercontent.com/u/636000/password_verification/index.html

Если вам нужно установить более сложные проверки, вы можете использовать следующую директиву use-form-error:

Живой пример на JsFiddle

<form name="testForm"> 
 
    <input ng-model="testVal" name="testVal" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^\w+$/" use-form-error="containWow" use-error-expression="testVal.indexOf('wow')>-1"> 
 
    <div ng-show="testForm.$invalid"> 
 
    <div ng-class="{'errors':testForm.testVal.$error.required,'success':!testForm.testVal.$error.required}">Required</div> 
 
    <div ng-class="{'errors':testForm.testVal.$error.minlength,'success':!testForm.testVal.$error.minlength}">Minlength</div> 
 
    <div ng-class="{'errors':testForm.testVal.$error.maxlength,'success':!testForm.testVal.$error.maxlength}">Maxlength</div> 
 
    <div ng-class="{'errors':testForm.testVal.$error.pattern,'success':!testForm.testVal.$error.pattern}">Pattern</div> 
 
    <div ng-class="{'errors':testForm.testVal.$error.containWow,'success':!testForm.testVal.$error.containWow}">It's 'wow' contains</div> 
 
    </div> 
 
</form>