Автор оригинала: Quoc Vo Minh.
Сегодня давайте узнаем о асинхронных валидах в Angularjs и как вы можете использовать его в ваших проектах.
Краткий фон
Мы хотим проверить, существует ли имя пользователя или не каждый раз, когда гость входит в имя пользователя в поле ввода. В этом руководстве я покажу ошибку, если сервер уже имеет имя пользователя.
Давайте начнем:
Во-первых, давайте создадим простой вид с именем пользователя и ввода пароля.
Далее, давайте напишем имя директива под названием Uternamexist.
angular.module('test').directive('userExist', function($http, $q) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.userExist = function(modelValue, viewValue) {
return $http.post('/username', {username: viewValue})
.then(
function(response) {
if (!response.data.status) {
return $q.reject();
//Server will give me a notify if it exist or not. I will throw a error If it exist with "reject"
}
return true;
}
);
};
}
};
});
Прежде чем мы продолжим следующие шаги, нам нужно что-то исправить на форме.
- Во-первых, используйте директиву на входе
- Далее измените условие на кнопке отправки (Чтобы обеспечить, когда Async Vailation пытается подключиться с $ http, он отключит эту кнопку).
Обертывание
Это оно! Это так просто!
Чтобы узнать больше о Angularjs, вы можете проверить другие учебные пособия, такие как: Директивы Angularjs: Практическое руководство для начинающих, валидация угловой формы – NGModelController, и мигрирование из угловых 1.x до угловых 2: обновление стратегий.