如何将错误添加到 angular 中的表单验证错误列表?

How to add error into form validation error list in angular?

我正在使用 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 用于仅获取有关已用用户名的信息,但我没有这种可能性,正如我已经说过的,在我发送注册请求之前,我无法检查用户名是否被占用。那么有人可以告诉我我该怎么办吗?使用这种验证的正确方法是什么?

在您的 html 中,将您的表单放入

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

这个标签是angular一种形式<form></form>。如果需要,您可以将一些 <ng-form> 放入 <ng-form> 等。

然后,在你的 html 组件上放置一个验证器,例如 "required" :

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

这里,class "invalid" 将被 angular 放在你的组件上,如果它是无效的,即不填写我们的案例。

然后您可以为 "invalid" class.

自定义您的组件

如果你想检查你所有的表单错误,你可以显示$error 变量。在我们的示例中,您可以打印 myFormName.$error 并使用 myFormName.$validmyFormName.$invalid

检查状态

为了在 angular way 中实现这一点,在 user-name input 中创建一个 Directive 来检查 unique validation,并创建一个 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>

directive可以是这样的,

在这个指令中,我们注入了一个名为 usernameservice 的工厂,returns promise 是真还是假。

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 }">  

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

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

这应该像这样在 catch 块中调用:

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

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