javascript - ngBlur 上的 Angular setPristine

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 中的密码字段.当用户键入密码时，验证以红色/绿色反射(reflect)。

Answer 1

您没有调用 $setPristine 方法。应该是 form.inputPass.$setPristine():

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

或更简洁的变体:

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