Call async service in AngularJS custom validation directive

Question

I have a directive for custom validation (verify a username doesn\'t already exist). The validation uses the $http service to ask the server if the username exists, so the

Answer 1

Angular has a dedicated array of $asyncValidators for precisely this situation:

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

ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
var value = modelValue || viewValue;

// Lookup user by username
return $http.get({url:'/api/users/' + value}).
   then(function resolved() {
     //username exists, this means validation fails
     return $q.reject('exists');
   }, function rejected() {
     //username does not exist, therefore this validation passes
     return true;
   });
};