Angularjs在另一个字段的keydown上验证字段

Question

我已经构建了一个 angularjs 模块，它提供了几个表单验证，而不是那些开箱即用的。在这些验证中，有一个称为 equalTo，它以要验证的字段的 ngModel 值作为参数。验证旨在验证ngModel controller 的$viewValue 和作为参数传递的ngModel controller 的$viewValue 严格相等。这将用于密码和确认密码字段作为示例。这一切都有效，除了我需要能够在任何一个的 keydown 上验证这两个字段。

正如我所说，所有这些逻辑都有效，除了当我在另一个字段的控制器上调用 $validate() 时，它总是返回 undefined 并且似乎没有像我预期的那样验证。代码在下面，但有很多，所以我已经包含了我的问题。您会注意到，当您最初为密码输入任何内容时，会出现错误，因为确认密码不匹配。当您输入确认密码时，没有错误，但初始密码字段仍然存在错误，除非您重新输入。

http://plnkr.co/edit/dIEIuUFMgglOt9uwIDNt?p=preview

这是代码

<input type="password" ng-model="password" equal-to="confirmPassword">
<input type="password" ng-model="confirmPassword" equal-to="password">

验证指令如下所示

function equalTo(Validator) {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: true,
            link: function (scope, elem, attr, ctrl) {
                var validator = new Validator(elem,attr,ctrl);
                validator.validate('equalTo');
        }
    }
}

验证器服务看起来像这样

/**
 * Created by rich on 8/14/15.
 *
 * Most of these regex statements were kifed from jquery validation plugin with perhaps a little bit of sugar
 * added to some by yours truly.
 *
 * Thanks to jzaeffer for his efforts.
 * http://jqueryvalidation.org
 * https://github.com/jzaefferer/jquery-validation
 */


(function(app, ng) {
    function validator(elementCollector) {
      /**
       * Created by rich on 8/14/15.
       *
       * Most of these regex statements were kifed from jquery validation plugin with perhaps a little bit of sugar
       * added to some by yours truly.
       *
       * Thanks to jzaeffer for his efforts.
       * http://jqueryvalidation.org
       * https://github.com/jzaefferer/jquery-validation
       */

      var Validator = function(elem, attr, ctrl) {
        var self = this;
        this.elem = elem;
        this.attr = attr;
        this.ctrl = ctrl;
        this.value = '';
        this.validating = false;
        this.tests = {
          equalTo: function(param) {
            param = self.attr[param];
            var equalityValue = elementCollector.retrieveElementValue(param);
            if (!self.value && !equalityValue) {
              return true
            }
            var isValid = (self.value === equalityValue);
            if (!self.validating) {
              self.validating = true;
              elementCollector.retrieveElementCtrl(param).$validate();
            }
            self.validating = false;
            return isValid
          }
          Validator.prototype.test = function(test) {
            return this.tests[test](test);
          };
          Validator.prototype.validate = function(test) {
            this.configureTest();
            var validator = function(modelValue, viewValue) {
              this.value = viewValue;
              return this.test(test);
            };
            this.ctrl.$validators[test] = validator.bind(this);
          };
          Validator.prototype.configureTest = function() {
            elementCollector.addElement(this.attr.ngModel, this.elem, this.ctrl);
          };
          return Validator;
        }

        app.factory('Validator', validator);
      })(app, angular);

元素收集器服务是这样的

/**
 * A service to hold all the elements of a Form
 * And their values at any given time
 * To be used with the validations service
 * And validations directives
 */

(function(app, ng) {
  function elementCollector() {
    var elementCollection = {};
    return {
      addElement: function(key, elem, ctrl) {
        elementCollection[key] = {
          element: elem,
          ctrl: ctrl
        };
      },
      setElementValue: function(key, value) {
        elementCollection[key].ctrl.$setViewValue(value);
        elementCollection[key].ctrl.$render();
      },
      retrieveElement: function(key) {
        return elementCollection[key].element;
      },
      retrieveElementValue: function(key) {
        console.log(key);
        return elementCollection[key].ctrl.$viewValue;
      },
      retrieveElementCtrl: function(key) {
        return elementCollection[key].ctrl;
      }
    }
  }

  app.factory('elementCollector', elementCollector);
})(app, angular);

Answer 1

嗯，我觉得很傻。问题不在此代码中，一旦我添加了$validate() 方法，我的解决方案实际上就像它应该在 plunk 中一样工作。我在代码中遇到的问题与一个完全不同的错误有关，该错误导致之后的任何 javascript 停止运行。把它都修好了，如果我浪费了你的时间，我很抱歉。希望这里的代码可以帮助尝试做类似事情的人。