模糊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;
          }
        );
      };
    });
  }
};

}

我have 了了这个问题，请按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的例子