javascript - 模糊 Angular JS 的异步验证

Question

我正在使用 Angular JS 1.5.6，我想执行仅在模糊时才会发生的异步输入验证。我指定此指令与其他指令一起使用，因此我既不能使用 modelOption: {debounce: 500} 也不能使用 modelOption: {updateOn: 'blur'}。

我尝试了下面的代码，但奇怪的是，在第一次模糊时，没有完成异步验证，当我返回输入时，对每个键入的字符执行异步验证，这正是我想避免的。

function blurFocusDirective($http, $q) {
return {
  require: 'ngModel',
  link: function(scope, elm, attrs, modelCtrl) {
    elm.on('blur', function() {
      console.log('capture blur event');

      modelCtrl.$asyncValidators.myValidator = function(modelValue, viewValue) {
        return $http.get('/username-check/' + modelValue).then(
          function(response) {
            if (!response.data.validUsername) {
              return $q.reject(response.data.errorMessage);
            }
            return true;
          }
        );
      };
    });
  }
};

我有plunkered问题，请按 F12 以查看控制台中发生的情况。

我准确地说 WS '/username-check/' 是假的，它与我要解决的问题无关。我的问题是异步 HTTP 请求是在每个键入的字符上完成的，而我希望它只在模糊时完成

Answer 1

您的代码有问题。每次当 onblur 事件发生时，当创建新的异步验证器时!当 ngModel 发生变化时，它的验证器每次都在工作。

试试这个。您可以手动设置验证。

elm.on('blur', function() {
      console.log('capture blur event');

      $http.get('/username-check/' + modelCtrl.$modelValue).then(
        function(response) {
          if (response.data.validUsername)
            modelCtrl.$setValidity("myValidation",true);
          else
            modelCtrl.$setValidity("myValidation",false);
        }
      ).catch(function() {
        modelCtrl.$setValidity("myValidation",false);
      });

    });

关于 plunker 的示例