Как добавить ошибку в список ошибок проверки формы в angular?

Чтобы добиться этого в 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 может быть примерно таким,

В этой директиве мы внедрили фабрику с именем 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 }">  

Такой код работает только для добавления ошибки проверки в массив:

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

это должно быть вызвано в блоке catch следующим образом:

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

Этот код не помечает никакие переменные формы вручную, вместо этого он использует метод интерфейса $setValidity, который устанавливает все необходимые переменные по мере необходимости.

В вашем html поместите свою форму в

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

Этот тег представляет собой угловую форму <form></form>. И вы можете поместить немного <ng-form> внутрь <ng-form> и т. д., если это необходимо.

Затем поместите валидатор в свой html-компонент, например «required»:

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

Здесь класс «недействительный» будет помещен angular на ваш компонент, если он недействителен, т. Е. Не заполняет в нашем случае.

Затем вы можете настроить свой компонент для «недопустимого» класса.

Если вы хотите проверить все ошибки формы, вы можете отобразить переменную $error. В нашем примере вы можете напечатать myFormName.$error и проверить статус с помощью myFormName.$valid или myFormName.$invalid.