How to add error into form validation error list in angular?

Question

I'm using ng-messages to validate my registration form fields, but I have a problem, I can't check if username is taken, until I send registration request to server. Currently I have this type of code:

UserPool.signUp(vm.form.username, vm.form.password, attributes)
    .then(function (result) {
        $state.go('app.pages_auth_confirm', {
            user: result.user
        });
    })
    .catch(function () {
        $scope.registerForm.username.$invalid = true;
        $scope.registerForm.username.$error.usernameAlreadyExists = true;
    });

and HTML:

<input name="username" ng-model="vm.form.username" placeholder="Name" required>
<div ng-messages="registerForm.username.$error" role="alert">
    <div ng-message="required">
        <span>Username field is required</span>
    </div>
    <div ng-message="usernameAlreadyExists">
        <span>User with this username already exists</span>
    </div>
</div>

and this works, but I want to know proper way of implementing that functionality. Registration form has many other fields also and changing some of them manually, for showing error, doesn't seems to be a good idea. I also did some research about validations and messages in angular and found out about custom validation and $asyncValidators but I can't use that functionality neither because as I understood I'll be needing some kind of API for getting information about used usernames only, but I don't have that kind of possibility, as I already said, I can't check if username is taken, until I send registration request. So can anybody tell me what should I do? What is the proper way for working with this kind of validation?

Answer 1

In order to achieve this in an angular way, create a Directive in the user-name input to check for the unique validation, and a factory to make an api call to get the username validation checked.

<input name="username" ng-model="vm.form.username" placeholder="Name" required name="username" unique> 

<div ng-messages="registerForm.username.$error" role="alert">
    <div ng-message="required">
        <span>Username field is required</span>
    </div>
    <div ng-message="unique">
        <span>User with this username already exists</span>
    </div>
</div>

the directive can be something like this,

In this directive we injected a factory called usernameservice, which returns the promise true or false.

myApp.directive('unique', function(usernameservice) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$asyncValidators.unique = usernameservice;
    }
  };
});

Here is the factory, where your api call goes.

myApp.factory('usernameservice', function($q, $http) {
  return function(username) {
    var deferred = $q.defer();

    // your api vall goes her
    $http.get('/api/users/' + username).then(function() { // 
      // Found the user, therefore not unique.
      deferred.reject();
    }, function() {
      // User not found, therefore unique!
      deferred.resolve();
    });

    return deferred.promise;
  }
});

Now the message will be displayed every time the value is changed, let us delay the check so that, if user enter more letters, it gets called, let us use the ng-model-option debounce for it.

<input name="username" ng-model="vm.form.username" placeholder="Name" required name="username" unique ng-model-options="{ debounce: 100 }">