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