AngularJS：自定义验证器尝试立即验证答案

【问题标题】：AngularJS: Custom validator trying to validate immediatelyAngularJS：自定义验证器尝试立即验证
【发布时间】：2014-10-27 14:49:00
【问题描述】：

我有一个表单，其中一些输入通过指令连接到自定义验证器。输入应通过模糊验证，并通过异步 REST API 调用进行验证。

HTML：

<input type="text"
   validate-this
   ng-model="thisField"
   ng-model-options="{'updateOn': 'blur'}"
   ng-pattern="some pattern"
/>

指令（为简洁起见缩写）：

return {
  access: 'A',
  require: 'ngModel',
  scope: false,
  link: function (scope, elem, attrs, ngModel) {
    ngModel.$asyncValidators.validateThis = function (modelVal, viewVal) {
      if (!modelVal && !viewVal) return $q.defer().promise;

      // returns a promise from the api service
      return api.doSomeValidation();
    };
  }
};

上面的代码完美运行，但请注意验证函数签名正下方的 hackish 行：

if (!modelVal && !viewVal) return $q.defer().promise;

如果没有这条线，Angular 会尝试在应用程序加载时立即验证该字段，而不是仅在模糊时验证。这是一个问题，因为实际的验证代码会进行一些字符串解析，并且由于 modelVal 和 viewVal 都是 undefined，因此 JavaScript 会引发错误。

我尝试禁用在应用程序加载时将数据加载到字段中的功能，但错误仍然发生。但是，ng-pattern 中指定的模式确实尊重我的意愿，并且仅在字段模糊时验证——它不会尝试在页面加载时验证。有没有办法告诉 Angular only 验证模糊，或者让它在页面加载后立即停止尝试验证？还是我错误地使用了$asyncValidators？

【问题讨论】：

How to add custom validation to an AngularJS form?

标签： javascript angularjs

【解决方案1】：

Angular 在每个 attr.$observe 的信号期间执行 $validate 输入验证指令，例如 ngPattern。您可以在他们的 patternDirective 函数中看到这一点。

我一直在尝试解决这个问题，因为我使用了许多输入验证（模式、最大长度、所需等），并且我的 $asyncValidators 在加载期间触发了 7 次。这会导致 Web 服务器为每个触发器执行。

解决方案：

缓存网络方法响应
在页面加载后附加您的处理程序（或具有某种类型的标志）

将 ngPattern 测试烘焙到您的异步处理程序中。我可能会选择这个。

ngModel.$asyncValidators.validateThis = function (modelVal, viewVal) {
    var deferred = $q.defer();

    if (!modelVal && !viewVal)
        deferred.resolve();
    else if (!myPattern.test(modelVal))
        deferred.reject();
    else
        api.doSomeValidation(value).then(function (result) {
            deferred.resolve();
        }, function (result) {
            deferred.reject();
        })

    return deferred.promise;
};

希望这会有所帮助，因为我在同一条船上寻找解决方案。

【讨论】：