css - AngularJS - 使用指令为输入表单设置 .error CSS 类

Question

我有一个注册表单，我想对已在数据库中注册的电子邮件进行实时输入验证。

我有指令工作，因此它会在输入框的每次更改时触发，但我无法让 Angular 设置正确的 .error范围内的 CSS 类。$watch 函数。

这是我的标记:

<form ng-app="mainApp" id="signup_form" name="signup_form" ng-controller="signupController" ng-submit="submit()" novalidate >
                    <fieldset>
                        <legend>Create New Account</legend>
                        <div class="control-group" ng-class="{ error: signup_form.username.$invalid }">
                            <label class="control-label" for="username">Username</label>
                            <div class="controls">
                                <input type="text" placeholder="Username" name="username"                           
                                ng-model="username" 
                                ng-minlength=3 
                                ng-maxlength=20 required />
                            </div>
                        </div>
                        <div class="control-group" ng-class="{ error: signup_form.email.$invalid}">
                            <label class="control-label" for="email">Email</label>
                            <div class="controls">
                                <input type="text" placeholder="Email" name="email" 
                                ng-model="email"
                                required 
                                uniqueaddress/>         
                            </div>
                        </div>          
                            <ul>
                                <li ng-show="signup_form.$error.required" class="error">Field is required.</li>
                                <li ng-show="signup_form.$error.minlength" class="error">Field must at least 3 characters</li>
                                <li ng-show="signup_form.$error.maxlength" class="error">Field is too long.</li>
                                <li ng-show="signup_form.$error.uniqueaddress" class="error">Email is already in use</li>
                            </ul>
                    </fieldset>
                    <button type="submit" ng-disabled="signup_form.$invalid" class="btn">Submit</button>
            </form>

注意第二个输入框上的指令属性“uniqueaddress”。这是我的唯一地址指令:

mainApp.directive('uniqueaddress', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) 
        {
            var isEmailValid = false;
            var isEmailValid = scope.$watch(attrs.ngModel, function (email) 
            {
                if(email == 'test')
                    scope.signup_form.$setValidity('uniqueaddress', false);
                else
                    scope.signup_form.$setValidity('uniqueaddress', true);
            });     
        }
    };
});

下面是演示该问题的 fiddle : http://jsfiddle.net/k4Cty/10/

输入任何 3 个字符的字符串，用户名字段的验证工作正常。对于电子邮件字段，如果您键入字符串“test”，则会触发验证并且 <li>标有 ng-show="signup_form.$error.uniqueaddress" 的元素然而出现.error没有为 <div class="control-group"> 设置类因为它不会变红表示验证错误。似乎设置了 .error默认类 ng-minlength和 required指令正在触发但不是 uniqueaddress .我在这里做错了什么？

Answer 1

This fiddle采用您的方法并采用非常标准的方法来使用指令添加验证。要点:

1. require 元素的 ngModel Controller ，您将在其中连接验证。
2. 在 $parsers 数组的开头放置一个函数，以便在从 DOM 解析值时执行验证。
3. 在 $formatters 数组的开头放置一个类似的函数，以便在从模型更新 DOM 时执行验证。

参见 this article ("Custom Validation")有关验证器如何工作的更多信息。

您不应尝试访问包含表单的 $setValidity() 函数。该方法没有记录并且可重用性有限。您还希望定位要检查其有效性的字段而不是错误类型。最后 formname.$dirty 是你的 friend 。我认为 angularJS 验证器有点急切，因为当你输入一个值时让验证器给你错误反馈很烦人，并且讨厌在你甚至还没有填写表格时看到到处都是错误，所以你可以做任何事情使它看起来不那么 panic 。