How to add an error to the list of form validation errors in angular?

Question

I use ng-messagesto check the fields of my registration form, but I have a problem, I can’t check if the username has been accepted until I send the registration request to the server. I currently 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>

, . , , . angular $asyncValidators, , , , - API , , , , , . - , ? ?

Answer 1

angular way, Directive user-name input, unique validation factory, api- .

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

Directive ,

a factory, usernameservice, true false.

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

factory, api.

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;
  }
});

, , , , , ng-model-option debounce .

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

Answer 2

:

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

catch catch :

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

, $setValidity, .

Answer 3

html

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

angular <form></form>. <ng-form> <ng-form> .., .

html, "required":

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

"invalid" angular , , .

"" .

, $error. m yFormName.$error myFormName.$valid myFormName.$invalid