ngBlur 上的 Angular setPristine答案

【问题标题】：Angular setPristine on ngBlurngBlur 上的 Angular setPristine
【发布时间】：2016-01-14 07:28:31
【问题描述】：

我有一个带有密码字段的表单，为此我实施了password 指令。
我目前只实施了 1 个验证，但我有一个现场验证列表。
我希望它们分别根据有效/无效显示为红色或绿色 - 当用户开始在字段中输入时。如果用户控件开箱即用并且所有验证都通过了，我想将该字段设置为有效并将其设置为原始，这样验证列表就不会出现。

但是，如果任何验证失败，我希望所有验证都被看到，即使该字段失焦。下面是我的表单组的 sn-p。

<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 中的密码字段。当用户输入密码时，验证会以红色/绿色显示。

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

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

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

或更简洁的变体：

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

【讨论】：

感谢工作。我认为只有在 JS 函数中 setPristine 才需要 () 。浪费了一个多小时。我已经有一段时间使用 Angular 编写了。
@TechCrunch 这是 JS函数你在ng-blur中调用的东西;)

【解决方案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>

【讨论】：