angularjs - 一次一个电子邮件表单验证

Question

我正在尝试为电子邮件字段实现表单验证。验证应执行以下操作:

检查是否在必填属性上输入了电子邮件，如果没有输入电子邮件，则显示一条消息

检查电子邮件是否具有有效格式(似乎无需指定属性即可自动完成)并在格式错误时显示消息

通过 $http.get 调用检查电子邮件是否唯一并显示一条消息，以防电子邮件被发现而无法使用

我希望第一条消息出现，如果该字段为空，第二条消息出现如果电子邮件无效，第三条消息出现，如果找到了电子邮件地址，因此一次不是唯一的。

如果我只尝试使用“required”属性，这会起作用，但是一旦我添加了我的 email-available 指令属性，它就不再检查电子邮件的格式，并且 email-available 指令与 required 属性一起执行。两条消息都会弹出，但我只希望用户一次看到一条消息。

我正在使用 angularjs 1.1.3。

有人能告诉我我可能做错了什么吗？

HTML

<div id="user_mod" class="mod_form" ng-show="userModScreenIsVisible">
<form name="mod_user" novalidate>
    <input type="email" name="email" ng-model="user.email" placeholder="E-Mail" required email-available/>
    <div class="user-help" ng-show="mod_user.email.$dirty && mod_user.email.$invalid">Invalid:
        <span ng-show="mod_user.email.$error.required">Please enter your email.</span>
        <span ng-show="mod_user.email.$error.email">This is not a valid email.</span>
        <span ng-show="mod_user.email.$error.emailAvailable">This email address is already taken.</span>
    </div>
</form>

指令

directive('emailAvailable', function($http) { // available
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            ctrl.$parsers.unshift(function(viewValue) {
                ctrl.$setValidity('emailAvailable', false);
                if(viewValue !== "" && typeof viewValue !== "undefined") {
                    console.log("variable is defined");

                    $http.get('/api/user/email/' + viewValue + '/available')
                        .success(function(data, status, headers, config) {
                            console.log(status);
                            ctrl.$setValidity('emailAvailable', true);
                            return viewValue;
                        })
                        .error(function(data, status, headers, config) {
                            console.log("error");
                            ctrl.$setValidity('emailAvailable', false);
                            return undefined;
                        });
                } else {
                    console.log("variable is undefined");
                    ctrl.setValidity('emailAvailable', false);
                    return undefined;
                }
            });
        }
    };
});

Answer 1

我看到你已经解决了你自己的问题，但我想我可以在这里为你提供一些提示/建议(我希望):

1) 您需要做的就是确保您的验证器在内置 Angular 验证器之后运行 push()到 ctrl.$parsers , 而不是 unshift()它。

2) 由于先前运行的验证器显示它无效(即，如果该字段已失效，如果您不想进行 Ajax 调用)，则阻止您的验证器运行。您只需要查看 ctrl.$invalid在 if验证器中的语句。

3) 您需要通过单独调用 $setValidity() 来使您的表单无效。在开始您的 ajax 调用之前，以及在它被接收之后。这样，您的表单在 AJAX 返回并说明它是否有效之前无效。

4) 这可能是次要的，但除非您添加 ctrl.$formatter同样，最初分配给 $scope 中对象的值在写入屏幕之前不会被验证。如果您的表单是通过路由、ng-repeat 或 ng-include 预先填充的数据动态添加到屏幕上的，这可能是一个问题。通常所有验证器都应该有一个 $parser 组件( View -> 模型)和一个 $formatter 组件(模型 -> View )。

5)注意事项。如果该值无效，大多数验证器都会从模型中完全删除该值。因为您正在进行异步调用，所以您必须立即在解析器函数中返回 viewValue。通常解析器函数会返回 undefined如果该字段无效，则可以防止无效数据出现在您的模型中。

6) 由于验证器有一个状态维护在您的 $error 对象中，因此您需要在初始命中此异步验证器时将其清除。见下文。

7) 旁注:在你的回答中，我注意到你在你的 ajax 响应处理程序中返回值......这不会为你做任何事情。由于调用是异步的，因此您实际上总是从该解析器返回 undefined。它会更新您的模型吗？如果是这样，我会很惊讶。

以下是我如何更改您的原始指令以使其按照您可能希望的方式工作:

app.directive('emailAvailable', function($http, $timeout) { // available
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
          console.log(ctrl);
            // push the validator on so it runs last.
            ctrl.$parsers.push(function(viewValue) {
                // set it to true here, otherwise it will not 
                // clear out when previous validators fail.
                ctrl.$setValidity('emailAvailable', true);
                if(ctrl.$valid) {
                  // set it to false here, because if we need to check 
                  // the validity of the email, it's invalid until the 
                  // AJAX responds.
                  ctrl.$setValidity('checkingEmail', false);

                  // now do your thing, chicken wing.
                  if(viewValue !== "" && typeof viewValue !== "undefined") {
                      $http.get('/api/user/email/' + viewValue + '/available')
                          .success(function(data, status, headers, config) {
                              ctrl.$setValidity('emailAvailable', true);
                              ctrl.$setValidity('checkingEmail', true);
                          })
                          .error(function(data, status, headers, config) {
                              ctrl.$setValidity('emailAvailable', false);
                              ctrl.$setValidity('checkingEmail', true);
                          });
                  } else {
                      ctrl.$setValidity('emailAvailable', false);
                      ctrl.$setValidity('checkingEmail', true);
                  }
                }
                return viewValue;
            });

        }
    };
});

And... of course, here is a plunker demonstrating it all