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

}

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