我正在使用 ng-messages
来验证我的注册表单字段,但我遇到了一个问题,我无法检查用户名是否被占用,直到我向服务器发送注册请求。目前我有这种类型的代码:
UserPool.signUp(vm.form.username, vm.form.password, attributes)
.then(function (result) {
$state.go('app.pages_auth_confirm', {
user: result.user
});
})
.catch(function () {
$scope.registerForm.username.$invalid = true;
$scope.registerForm.username.$error.usernameAlreadyExists = true;
});
和 HTML:
<input name="username" ng-model="vm.form.username" placeholder="Name" required>
<div ng-messages="registerForm.username.$error" role="alert">
<div ng-message="required">
<span>Username field is required</span>
</div>
<div ng-message="usernameAlreadyExists">
<span>User with this username already exists</span>
</div>
</div>
这可行,但我想知道实现该功能的正确方法。注册表单还有许多其他字段,手动更改其中一些以显示错误似乎不是一个好主意。我还对 Angular 验证和消息进行了一些研究,并发现了自定义验证和 $asyncValidators
但我也不能使用该功能,因为据我所知,我需要某种 API仅获取有关已用用户名的信息,但我没有那种可能性,正如我已经说过的,在我发送注册请求之前,我无法检查用户名是否被占用。那么有人可以告诉我我该怎么办吗?使用这种验证的正确方法是什么?
最佳答案
为了以 Angular 方式
实现这一点,在用户名输入
中创建一个指令
来检查唯一验证
,以及一个 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>
指令
可以是这样的,
在这个指令中,我们注入(inject)了一个名为 usernameservice
的工厂,它返回 promise 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 }">
关于javascript - 如何以 Angular 将错误添加到表单验证错误列表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39831002/