關於模糊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的例子