Question

我使用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>

这是有效的，但我想知道实现该功能的正确方法。注册表还有许多其他字段，并手动更改其中一些字段，以显示错误，似乎不是一个好主意。我还对角度验证和消息进行了一些研究，并发现了自定义验证和$asyncValidators，但我无法使用该功能，因为据我所知，我需要使用某种API获取有关使用过的用户名的信息，但我没有这种可能性，正如我已经说过的那样，我无法检查用户名是否被采用，直到我发送注册请求为止。所以有人能告诉我该怎么办？使用这种验证的正确方法是什么？

Answer 1

要在angular way中实现此目的，请在Directive中创建user-name input以检查unique validation，并factory创建<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> api调用以检查用户名验证。

directive

usernameservice可以是这样的，

在这个指令中，我们注入了一个名为myApp.directive('unique', function(usernameservice) { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$asyncValidators.unique = usernameservice; } }; });的工厂，该工厂返回promise true或false。

factory

以下是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; } });，您的api电话会在那里发送。

ng-model-option

现在每次更改值时都会显示该消息，让我们延迟检查，这样，如果用户输入更多字母，就会调用它，让我们使用 debounce {{1} 。

<input name="username" ng-model="vm.form.username" placeholder="Name" required name="username" unique ng-model-options="{ debounce: 100 }">

Answer 2

这种代码仅用于将验证错误添加到数组中：

$scope.registerForm.username.$setValidity("usernameAlreadyExists", false);

这应该在catch块中调用，如下所示：

...
.catch(function () {
    $scope.registerForm.username.$setValidity("usernameAlreadyExists", false);
});

此代码不会手动标记任何表单变量，而是使用接口方法$setValidity根据需要设置所有必需的变量。

Answer 3

在您的HTML中，将表单放入

<ng-form name="myFormName">
    ... your form...
</ng-form>

此标记是角度形式<form></form>。如果需要，您可以在<ng-form>等内部放置一些<ng-form>。

然后，在你的html组件上放置一个验证器，例如＆＃34; required＆＃34; ：

<ng-form name="myFormName">
    <input type="text" name="myinput" ng-required="true">
</ng-form>

这里，一个班级＆＃34;无效＆＃34;如果它是无效的，将在你的组件上以角度放置，即，不填写我们的情况。

然后，您可以自定义您的组件＆＃34;无效＆＃34;类。

如果要检查所有表单错误，可以显示$ error变量。在我们的示例中，您可以打印m yFormName.$error并使用myFormName.$valid或myFormName.$invalid检查状态

如何在角度中将错误添加到表单验证错误列表中？

3 个答案: