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 }">  

Answer 2

This kind of code works for just adding validation error into the array:

$scope.registerForm.username.$setValidity("usernameAlreadyExists", false);

this should be called in catch block like this:

...
.catch(function () {
    $scope.registerForm.username.$setValidity("usernameAlreadyExists", false);
});

This code doesn't flags any of the form variables manually instead it uses interface method $setValidity which sets every necessary variable as needed.

Answer 3

In your html, put your form in

<ng-form name="myFormName">
    ... your form...
</ng-form>

This tag is the angular one form <form></form>. And you can put some <ng-form> inside <ng-form> etc. if needed.

Then, put a validator on your html component, such as "required" :

<ng-form name="myFormName">
    <input type="text" name="myinput" ng-required="true">
</ng-form>

Here, a class "invalid" will be put by angular on your component if it is invalid, i.e, not fill in our case.

You can then customize your component for "invalid" class.

If you want to check all your form error, tyou can display the $error variable. In our exemple, you can print myFormName.$error and check status with myFormName.$valid or myFormName.$invalid