重置 ngModel 的有效性答案

【问题标题】：Reset Validity of ngModel重置 ngModel 的有效性
【发布时间】：2015-04-16 14:15:08
【问题描述】：

最近，我遇到了 Angular 表单有效性的问题。我可以通过帮助 ngModel.$setValidity 轻松将条目添加到 Array，但之后我无法将其删除。我的 html 标签有很多有效/无效的类。我试着把表格做得很原始。但它不起作用。那东西一般怎么办？请帮帮我！（对不起我的英语=）如果我在某处犯了错误。）

【问题讨论】：

标签： angularjs reset

【解决方案1】：

它的文档记录不是很好，但您实际上可以将null 传递给$setValidity() 函数以完全清除验证标志。

如果您想将其设置为有效，则只需传入true

//Reset validity for this control
this.form.firstName.$setValidity('someValidator', null);

//Or set to valid
this.form.firstName.$setValidity('someValidator', true);

这是一个正在运行的 sn-p 来演示这种技术。

(function() {
  'use strict';

  function MainCtrl() {
    this.firstName = 'Josh';
  }
  MainCtrl.prototype = {
    setInvalid: function(ctrl) {
      ctrl.$setValidity('customValidator', false);
    },
    setPristine: function(ctrl) {
      ctrl.$setValidity('customValidator', null);
    },
  };

  angular.module('sample', [])
    .controller('MainCtrl', MainCtrl);


}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app="sample" ng-controller="MainCtrl as ctrl">
  <div class="row">
    <div class="col-sm-12">
      <form name="ctrl.form">
        <div class="form-group" ng-class="{'has-error':ctrl.form.firstName.$invalid}">
          <label class="control-label">First Name</label>
          <input type="text" class="form-control" name="firstName" ng-model="ctrl.firstName" />
        </div>
        <button type="button" class="btn btn-danger" ng-click="ctrl.setInvalid(ctrl.form.firstName)">Set Invalid</button>
        <button type="button" class="btn btn-success" ng-click="ctrl.setPristine(ctrl.form.firstName)">Set Valid</button>
      </form>
    </div>
  </div>
</div>

【讨论】：

有这个功能：链接：功能（范围，元素，属性，ngModel）{}我应该使用什么？对于 $setValidity()
我试过 element.$setValidity("", null) 和 ngModel.$setValidity("",null)，但没用...
@Heng - 我想我不清楚你的用例是什么？在那个小 sn-p ngModel 是模型控制器。你可以直接在上面调用ngModel.$setValidity。
@Heng 你认为你可以扩展你的问题以包含一个更好的例子。或者创建一个 Plunker？
终于！我做到了 =)) ngModel.$setPristine();这是我的目的所需要的吗？

【解决方案2】：

(function () {
    angular.module("App")
        .directive("password", password);

    function password() {

        var lastTrueRegex = {};

        var regexes = {
            week: /(?=^.{8,}$).*$/,
            pettyWeek: /(?=^.{8,}$)(?=.*\d).*$/,
            normal: /(?=^.{8,}$)(?=.*\d)(?=.*[a-z]).*$/,
            prettyStrong: /(?=^.{8,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/,
            strong: /(?=^.{8,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?![.\n]).*$/,
            veryStrong: /(?=^.{8,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?![.\n])(?=.*[!@#$%^&*]+).*$/
        };

        function forEach(data, callback) {
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    callback(key, data[key]);
                }
            }
        }

        return {
            require: "ngModel",
            restrict: 'EA',
            link: function (scope, element, attributes, ngModel) {

                ngModel.$parsers.unshift(function (textValue) {

                    forEach(regexes, function (key, regex) {
                        if (regex.test(textValue)){
                            lastTrueRegex.name = key;
                            lastTrueRegex.value = true;
                        }else{
                            ngModel.$setValidity(key, null);
                        }
                    });

                    if (lastTrueRegex.name){
                        ngModel.$setValidity(lastTrueRegex.name, lastTrueRegex.value);
                        return textValue;
                    }
                });

                ngModel.$formatters.unshift(function (modelValue) {
                    //ngModel.$setValidity('strongPass', isValid(modelValue));
                    return modelValue;
                });
            }
        };
    }
})();

<form name="myForm">
    <input type="text" name="password" ng-model="textValue" password/>
</form>

【讨论】：