AngularJS：自定义验证试图立即验证 [英] AngularJS: Custom validator trying to validate immediately

问题描述

我有一些在这里的输入是通过一个指令迷上了一个自定义验证器的形式。输入应该验证上的模糊，并通过异步REST API调用这样做。

I have a form where some of the inputs are hooked up to a custom validator via a directive. The input should validate on blur, and does so via an asynchronous REST API call.

HTML

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

指令（简称为简洁起见）：

Directive (shortened for brevity):

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();
    };
  }
};

以上code完美的作品，但注意的hackish线正下方的验证函数签名：

The above code works perfectly, but notice the hackish line directly below the validation function signature:

如果（modelVal＆安培;！＆安培;！viewVal）返回$ q.defer（）的承诺;

如果没有这条线，角尝试立即验证应用程序负载，而不是只对模糊的领域。这是因为实际的验证code的一个问题做一些字符串解析，并因为这两个 modelVal 和 viewVal 是未定义的JavaScript抛出一个错误。

Without that line, Angular attempts to validate the field immediately on application load instead of only on blur. This is a problem as the actual validation code does some string parsing, and since both modelVal and viewVal are undefined, JavaScript throws an error.

我曾尝试禁用加载到数据加载应用程序时，错误仍然发生领域的功能。在指定NG-模式的模式，然而，确实尊重我的意愿，只验证现场模糊 - 它不尝试验证页加载。有没有办法告诉角度为仅验证上的模糊，或让它停止试图在网页加载尽快验证？还是我使用 $ asyncValidators 正确？

I have tried disabling the functionality that loads data into the fields when the application loads, and the error still happens. The pattern specified in ng-pattern, however, does respect my wishes and only validates on field blur--it does NOT attempt to validate on page load. Is there any way to tell Angular to only validate on blur, or to get it to stop trying to validate as soon as the page loads? Or am I using $asyncValidators incorrectly?

推荐答案

角执行每个attr的信号。在$验证。$观察的输入验证指令，如ngPattern。你可以看到，在他们的patternDirective功能。

Angular executes the $validate during the signal of each attr.$observe for the input validations directives such as ngPattern. You can see that in their patternDirective function.

我一直在试图找到解决的办法，因为我用很多输入验证（模式，最大长度，要求等）和我的$ asyncValidators负载过程中引发的7倍。这导致了网络服务器为每个触发执行

I have been trying to find a way around this as I use many of the input validations (pattern, max length, required, etc.) and my $asyncValidators are triggering 7 times during load. This caused the web server to execute for each trigger.

解决方案：

• 缓存Web方法响应


• 附上您的处理程序页面加载后（或有某种类型的标志）



• 烤ngPattern测试到您的异步处理。我可能会去这一个。

• cache the web method response
• attach your handler after the page load (or have some type of flag)

• bake the ngPattern test into your async handler. I would probably go with this one.

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;
};

希望这有助于为我在同一条船上寻找一个解决方案。

Hopefully this helps as I am in the same boat looking for a solution.

这篇关于AngularJS：自定义验证试图立即验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！