Задать недопустимое поле формы / поля ввода для сервера $asyncValidators

Question

Когда пользователь вводит свою электронную почту, я отправляю ее на сервер, чтобы проверить, используется ли она, если я получил ответ сервера как ошибку, я хочу установить недопустимую форму и представить сообщение "emailInUse"

Моя директива

ctrl.$asyncValidators.email = function(ctrl, viewValue) {
            return registerResource.emailAvailable.save({"email":viewValue}).$promise.then(
                    function success(response) {
                        // Set the form valid
                    },
                    function error(response) {
                        // Set the form invalid
                    });
        };

Мой шаблон

 <form name="registerForm" ng-submit="vm.register()" role="form">
    <div class="form-group">
        <div>
            <input type="email"
                   placeholder="email"
                   name="email"
                   class="form-control"
                   ng-model="vm.email"
                   email-available
                   ng-minlength=4 ng-maxlength=50 required/>

            <div ng-messages="registerForm.email.$error">
                <div ng-message="required">
                    You forgot to enter your email address...
                </div>
                <div ng-message="email">
                    You did not enter your email address correctly...
                </div>
                <div ng-message="emailInUse">
                    You did not enter your email address correctly...
                </div>
            </div>
        </div>
    </div>

Answer 1

Вам необходимо настроить защищенный объект и разрешить или отклонить его в зависимости от успеха или ошибки ваших ресурсов.

Я взял пример кода из https://docs.angularjs.org/guide/forms и немного изменил его, чтобы он соответствовал вашему коду. Посмотреть здесь:

app.directive('emailAvailable', function($q, $timeout) {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {

      ctrl.$asyncValidators.emailInUse = function(modelValue, viewValue) {

        var def = $q.defer();

        registerResource.emailAvailable.save({"email":viewValue}).$promise.then(
          function success(response) {
              // Set the form valid
              def.resolve();
          },
          function error(response) {
              // Set the form invalid
              def.reject();
          });

        return def.promise;
      };
    }
  };
});

Я изменил пример Angular plnkr для лучшего понимания:

http://plnkr.co/edit/bfSUcqJONz5QAg6vnZ7O?p=preview

Подсказка: он использует $timeout вместо http-вызова к бэкэнду. Но если вы введете одно из этих имен var usernames = ['Jim', 'John', 'Jill', 'Jackie']; с небольшой задержкой в ​​2 секунды он показывает, что имя пользователя уже занято.