Question

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

我有指令工作，以便在输入框的每次更改时触发，但是我无法让Angular在范围内设置正确的.error CSS类。$ watch function。

这是我的标记：

<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);
            });     
        }
    };
});

这是展示这个问题的小提琴： http://jsfiddle.net/k4Cty/10/

输入任意3个字符的字符串，验证适用于用户名字段。对于电子邮件字段，如果您键入字符串'test'，则会触发验证并显示标有<li>的{{1}}项，但ng-show="signup_form.$error.uniqueaddress"类未设置为{{1}因为它不会变为红色，表示验证错误。似乎为默认.error和<div class="control-group">指令设置.error类正在触发但不适用于ng-minlength。我在这里做错了什么？

Answer 1

This fiddle采用一种非常标准的方法，使用指令添加验证。要点：

require元素的ngModel控制器，您可以在其中进行验证。
在$parsers数组的开头放置一个函数，以便在从DOM解析值时执行验证。
在$formatters数组的开头放置一个类似的函数，以便在从模型更新DOM时执行验证。

有关验证程序如何工作的详细信息，请参阅this article ("Custom Validation")。

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

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

1 个答案: