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”。这是我的 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 。