重置 ngModel 的有效性

Question

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

Answer 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);

这里有一个运行片段来演示这种技术。

(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>

Answer 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>

重置 ngModel 的有效性

Reset Validity of ngModel

reset

angularjs