javascript - 仅在一个验证器上去抖动

Question

我刚刚阅读了精彩的 angular page on form validation我可能错过了一些东西，但如何在特定验证器上应用 ng-model-options debounce 属性。

让我解释一下这个问题。我有一个验证公钥的表单，为此我有一个名为 key-check 的指令，其中包含多个验证器。其中一些是本地和同步的，如 key 格式，还有另一种异步检查 key 在服务器上是否可用(异步)。

我不希望我的服务器被淹没，也不希望 Angular 应用程序变慢，所以我使用了酷 children 所说的去抖动，我的输入看起来像这样:

<input type="text" ... ng-model="key" key-check ng-model-options="{ debounce: 700 }" ng-minlength="5" ng-maxlength="50"/>

指令是这样的:

ctrl.$validators.keyFormatCheck = function(modelValue) {
   // return boolean
}

ctrl.$asyncValidators.KeyAvailabilityCheck = function(modelValue) {
   // return promise
}

它的工作就像一个魅力，但所有检查都是在 700 毫秒的延迟下完成的，我想知道是否有可能在不去抖动的情况下执行 keyFormatCheck，并使用它执行 KeyAvailabilityCheck。我可能可以使用 $timeout 的旧好方法，但我更喜欢 Angular 方式。

有什么想法吗？

Answer 1

ngModelController 的 debounce 适用于解析器、验证器和 View 更改监听器(例如 ng-change)的整个管道。

今天(Angular v1.4)无法使用 ngModelOptions 将 debounce 延迟隔离到特定验证器。

但是通过将延迟参数传递给您自己的异步验证器指令可以轻松实现该功能:

<input ng-model="val" foo-validator="{delay: 500}">

您使用 $timeout 实现实际延迟；这里没有理由避免使用 $timeout，因为它在某种程度上不如“Angular 方式”；不是。

唯一的技巧是确保在执行新请求之前取消之前的待定验证请求。

var pendingValidation;
ngModel.$asyncValidators.foo = function(modelValue, viewValue){

  if (pendingValidation) $timeout.cancel(pendingValidation);

  pendingValidation = $timeout(function(){
    pendingValidation = null;

    // returns promise or value
    return doAsyncValidation();
  }, delay);

  return pendingValidation;
};

delay 可以通过 foo-validator 属性从参数中获取，或者使用隔离范围绑定(bind)(scope: {config: "=fooValidator"} )，或者直接使用 $eval-ing 属性表达式对正确的范围:

var config = $scope.$eval(attrs.fooValidator);
var delay = config.delay;