我有一个带有密码字段的表单，为此我实施了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中的密码字段。用户输入密码时，验证以红色/绿色显示。
最佳答案
您没有在调用$setPristine方法。应为form.inputPass.$setPristine()：
ng-blur="form.inputPass.$invalid ? return: form.inputPass.$setPristine()"
或更清洁的变化：
ng-blur="form.inputPass.$valid && form.inputPass.$setPristine()"