Question

我有一个带密码字段的表单，我为其实现了password指令。
我目前只实现了1次验证，但我在该字段上列出了验证。
我希望它们分别以红色或绿色显示，具体取决于有效/无效 - 当用户开始在字段中输入时。如果用户控件开箱即用并且所有验证都已通过，我想将该字段设置为有效并将其设置为pristine，以便验证列表不会显示。

但是，如果任何验证失败，即使字段没有焦点，我也希望看到所有这些验证。以下是表单组的代码段。

<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.dropboxusercontent.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>

ngBlur上的Angular setPristine

2 个答案: