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

Question

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

0

Когда пользователь вводит свой адрес электронной почты, я отправляю его на сервер, чтобы проверить, действительно ли он используется, если я получил ответ сервера как ошибку, я хочу установить форму на недопустимое и представить сообщение "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>

Alexander Gorelik 06 июль 2015, в 13:39

Источник

Теги:

angularjs

angular-resource

1 ответ

Ещё вопросы

ilmgb · Accepted Answer · 2015-07-06T09-51-00.000Z

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

Я взял код примера из 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 example plnkr, чтобы лучше понять:

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

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