Angular JS自定義驗證$ asyncvalidator未定義

Question

試圖添加一個asyncvalidator到我的自定義用戶名驗證器。但它輸出錯誤：

TypeError：無法設置屬性「用戶名」未定義。

如何讓asyncvalidator定義？我以爲我會自動由NgModel控制器？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
angular.module('myApp.commonDirectives', ['myApp.services']).directive('username', ['UsernameService',function(UsernameService){ 
 
\t 
 
\t return { 
 
\t \t 
 
\t  restrict: 'A', 
 
\t  require: "ngModel", 
 
\t  scope: { 
 
\t   hasFocus: "=username" 
 
\t   
 
\t  }, 
 
\t  link: function(scope, element, attrs, ctrl) { 
 
\t  
 
\t   scope.$watch('hasFocus', function(hasFocus) { 
 
\t    if(angular.isDefined(hasFocus)) { 
 

 
\t     // on blur 
 
\t     if(!hasFocus) { 
 
\t      
 
\t     
 
\t      ctrl.$validated=false; 
 
\t      ctrl.$asyncValidators.username = function(value){ 
 
\t      UsernameService.validate(value) 
 
\t       .then(function(resolvedData) { 
 
\t        if(resolvedData) { 
 
\t       
 
\t        \t ctrl.$validated=true; 
 
\t         ctrl.$setValidity('checking', true); 
 
// \t         ctrl.$setValidity('username', true); 
 
\t        } 
 
\t        else { 
 
\t       
 
\t        \t ctrl.$validated=true; 
 
\t         ctrl.$setValidity('checking', false); 
 
// \t         ctrl.$setValidity('username', false); 
 
\t        } 
 
\t       } 
 
\t      ); 
 
\t     } 
 
\t     } 
 
\t     
 
\t     // on focus 
 
\t     else { 
 
\t      ctrl.$setValidity('username', true); 
 
\t      ctrl.$setValidity('checking', true); 
 
\t     } 
 
\t    } 
 
\t    
 
\t   }); 
 
\t  } 
 

 
\t } 
 
}])

Answer 1

try something like this : 

angular.module('myModule').directive('usernameValidator', function($http, $q) { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      ngModel.$asyncValidators.username = function(modelValue, viewValue) { 
       return $http.post('/username-check', {username: viewValue}).then(
        function(response) { 
         if (!response.data.validUsername) { 
          return $q.reject(response.data.errorMessage); 
         } 
         return true; 
        } 
       ); 
      }; 
     } 
    }; 
}); 

Answer 2

$asyncValidators可從angularjs 1.3以上：

https://code.angularjs.org/1.2.27/docs/api/ng/type/ngModel.NgModelController