角度異步驗證器不撥打電話到後端

我試圖做一個指令，將異步調用我的後端來查看給定的客戶是否在數據庫中，並報告如果該表單字段然後是有效的。角度異步驗證器不撥打電話到後端

function getCustomerValidationDirectiveFunc(){ 
return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, element, attr, ngModel){ 
     var serverAddr = '/validate/customer/' 

     ngModel.$validators.invalidUsername = function(modelValue, viewValue) { 
      // validation logic here 
      var username = modelValue || viewValue; 
      var deferred = $q.defer(); 

      // ask the server if this username exists 
      $http.get(serverAddr+username).then(
       function(response) { 
        console.log("RESPONSE RECEIVED FROM SERVER") 
       if (response.data.exists) { 
        deferred.reject(); 
       } else { 
        deferred.resolve(); 
       } 
       }); 

      // return the promise of the asynchronous validator 
      return deferred.promise; 
      } 
    } 
    } 
} 

app.directive('customerValidator', ['$http', '$q', getCustomerValidationDirectiveFunc()]);

這裏是我的HTML代碼：

<p><input type="text" ng-model="customer.customer_id" required customer-vlidator ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0}}"></input></p>

我想要的輸入到500ms的延遲（防抖）之後檢查所有輸入和異步調用我的後臺設置該字段，如果無效客戶已經存在於數據庫中...我甚至沒有看到我的網絡選項卡上正在進行的HTTP調用...所以爲什麼這不起作用？

來源

2017-01-24 Dan

在你的HTML代碼，例如，你有客戶vlidator，這是一個錯字或者是，你必須在當前的HTML是什麼？ –

這是我從製作SO問題時的錯字... – Dan

這就是我最後想到的......我認爲主要問題在於將$ q傳遞給函數以正確的順序。（$ q.defer不是函數）以及$ http.get（）。then（）回調中的if語句。這是response.data.exist，我將其更改爲response.data === false並且從我的驗證端點返回true或false。

JAVASCRIPT

app.directive('customerValidator', ['$q','$http', function($q, $http){ 
return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, element, attr, ngModel){ 
     var serverAddr = '/validate/customer/' 

     ngModel.$asyncValidators.invalidCustomer = function(modelValue, viewValue) { 
      // validation logic here 
      var customer = viewValue || modelValue; 
      var deferred = $q.defer(); 

      // ask the server if this username exists 
      $http.get(serverAddr+customer).then(
       function(response) { 
       if (response.data === false) { 
        deferred.reject(); 
       } else { 
        deferred.resolve(); 
       } 
       }); 

      // return the promise of the asynchronous validator 
      return deferred.promise; 
      } 
    } 
}}]);

HTML

<input type="text" ng-model="customer.customer_id" required customer-validator ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0}}"></input>

來源

2017-01-24 08:55:20 Dan

角度異步驗證器不撥打電話到後端

回答

相關問題