angularJS $ asyncValidators с $ http.get

Question

Вопрос в этом. Как я могу вернуть результат функции (ответа) в ngModel. $ AsyncValidators.usernameAvailable. URL-адрес, указанный в $ http.get, возвращает true, если пользователь существует и false, если нет. Постскриптум response.data возвращает правильный ответ, я проверил.

app.directive('usernameAvailableValidator',['$http', function($http){ 
    return{ 
     restrict : 'A', 
     require : 'ngModel', 
     link : function(scope, element, attrs, ngModel){ 
      ngModel.$asyncValidators.usernameAvailable = function(username){ 
       return $http.get('/auth/username/exists/'+username). 
        then(function(response){return response.data}); 
      }; 
     } 
    } 
}]) 

Answer 1

Асинхронные валидаторы рассчитывают отклонить обещание в случае неудачной проверки. Это означает, что вам нужно отклонить свое обещание в случае, если пользователь существует. В вашем случае достаточно просто использовать $ q.reject:

app.directive('usernameAvailableValidator', ['$q', '$http', function($q, $http) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      ngModel.$asyncValidators.usernameAvailable = function(username) { 
       return $http.get('/auth/username/exists/' + username). 
       then(function(response) { 
        if (response.data) return $q.reject(); 
       }); 
      }; 
     } 
    } 
}]) 

Answer 2

Вы должны сбросить свойства формы. например

<form name="fred" novalidate> 
    ...  
</form> 

<div>{{ fred }}</div> 

Вы должны увидеть нагрузку действительных и недопустимых значений. Нужно относиться к usernameAvailable. В вашем asyncValidator вам может потребоваться использовать $ q.resolve() и $ q.reject() для действительных и недействительных.

Примечание: вы можете положиться на $ http (и не использовать $ q), поскольку $ http возвращает обещание, но это работает только если вы хотите разрешить ответы 2xx и отклонить для всех других ответов, что, похоже, не является случай здесь.

Также при отклонении связывания потерпит неудачу, если вы не используете ...

data-ng-model-options='{allowInvalid:true}'