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

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>

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

Answer 1

为了在 中实现此目的angular way，请Directive在 中创建一个user-name input来检查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，它返回承诺 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 }">