AngularJS：为什么我的领域失效？ [英] AngularJS : Why is my field invalid?

问题描述

我有密码定义验证

  app.directive（'的userPassword'，函数（）{
    返回{
        限制：'A'，
        要求：'ngModel'，
        链接：功能（范围，榆树，ATTRS，CTRL）{
            Ctrl键。$ validators.myValidator =功能（modelValue，viewValue）{
                VAR味精= helper.validation.user.localPassword（modelValue）
                Ctrl键。$返回Error.message =味精
                ctrl.required = helper.validation.user.localPassword（）
                回报！味精
            }
        }
    }
}）
 

这是我的密码的html：

 ＆LT; D​​IV CLASS =我的外形组＆GT;
    ＆LT;标签=signup_password＆GT;密码：LT; /标签＆gt;
    ＆LT;输入NG模型=密码TYPE =密码NAME =密码ID =signup_password
        占位=请输入密码
        用户密码NG-所需=signupForm.password.required级=我的外形控＆GT;
＆LT; / DIV＆GT;
 

当我输入 ABCD ，该指令的返回值链接功能真。当我检查的元素，我得到这样的：

 类=我的外形控制NG-NG无效脏NG-有效解析的NG-有效要求的NG-有效-MY-验证NG-感动
 

正如你所看到的，要求和我的验证器是有效的（纳克 - 有效要求的和 NG-有效-MY-验证。为什么我的类仍然 NG-无效？

当我检查整个形式，它是 NG-有效

更新。如果我使用范围而不是 CTRL ，它的工作。

 控制$ validators.myValidator =功能（modelValue，viewValue）{
    VAR味精= helper.validation.user.localUsername（modelValue）    scope.userUsername = {}
    scope.userUsername.message =味精
    scope.userUsername.required = helper.validation.user.localUsername（）
    回报！味精
};
 

和在HTML中

 ＆LT;输入NG模型=用户名类型=文本名称=用户名ID =signin_username
       占位=输入用户名
       用户名NG-所需=userUsername.required级=我的外形控＆GT;＆LT; D​​IV NG秀=$ signinForm.username感动和放大器;＆安培; userUsername.message＆GT;
    {{userUsername.message}}
＆LT; / DIV＆GT;
 

但我不想污染控制范围。如何使用 CTRL 而不是范围

编辑：
您可以在下面的样式添加到头部。输入字段始终是红色的。

http://plnkr.co/edit/deAQoIw4KfekIh3ZOt1j?p=$p$ PVIEW

 ＆LT;风格＆GT;    input.ng-invalid.ng触摸{
      背景颜色：＃FA787E;
    }    input.ng-valid.ng触摸{
      背景颜色：＃78FA89;
    }    input.ng-pending.ng触摸{
      背景颜色：＃b3933b;
    }
＆LT; /风格＆GT;
 

解决方案

这是我实施用户名字段。密码应pretty大同小异。

  VAR DEF = $ q.defer（）
                ctrl.message ='检查用户名唯一的服务器
                restService.checkIsUsernameUnique（modelValue，函数（）{
                    ctrl.message ='确定其唯一的用户名
                    def.resolve（）
                }，功能（错误）{
                    ctrl.message = err.message
                    def.reject（）
                }）
                返回def.promise;
 

和在HTML中

 ＆LT; D​​IV NG秀=$ form.username感动和放大器;＆安培; form.username.message＆GT;
                {{form.username.message}}
            ＆LT; / DIV＆GT;
 

在总之，不要把消息放在控制$误差如果你想要把非错误信息，以及

I have a custom validation for password

app.directive('userPassword', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.myValidator = function(modelValue, viewValue) {
                var msg = helper.validation.user.localPassword(modelValue)
                ctrl.$error.message = msg
                ctrl.required = helper.validation.user.localPassword()
                return ! msg
            }
        }
    }
})

This is my password html:

<div class="my-form-group">
    <label for="signup_password">Password:</label>
    <input ng-model="password" type="password" name="password" id="signup_password" 
        placeholder="Enter Password"
        user-password ng-required="signupForm.password.required" class="my-form-control">
</div>

When I enter abcd, the returned value of the directive link function is true. When I inspect the element, I got this:

class="my-form-control ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-valid-my-validator ng-touched" 

As you can see, both required and my-validator is valid (ng-valid-required and ng-valid-my-validator. Why is my class still ng-invalid?

When I inspect the entire form, it is ng-valid

Update. If I use scope instead of ctrl, it's working.

ctrl.$validators.myValidator = function(modelValue, viewValue) {
    var msg = helper.validation.user.localUsername(modelValue)

    scope.userUsername = {}
    scope.userUsername.message = msg
    scope.userUsername.required = helper.validation.user.localUsername()
    return ! msg
};

And in HTML

<input ng-model="username" type="text" name="username" id="signin_username" 
       placeholder="Enter Username"
       user-username ng-required="userUsername.required" class="my-form-control">

<div ng-show="signinForm.username.$touched && userUsername.message">
    {{userUsername.message}}
</div>

But I dont want to pollute the controller scope. How can I use ctrl instead of scope

Edit: You can add the following style to the header. The input field is always red.

http://plnkr.co/edit/deAQoIw4KfekIh3ZOt1j?p=preview

<style>

    input.ng-invalid.ng-touched {
      background-color: #FA787E;
    }

    input.ng-valid.ng-touched {
      background-color: #78FA89;
    }

    input.ng-pending.ng-touched {
      background-color: #b3933b;
    }
</style>

解决方案

This is my implementation for username field. Password should be pretty much the same.

                var def = $q.defer()
                ctrl.message = 'checking the server for username unique'
                restService.checkIsUsernameUnique(modelValue, function() {
                    ctrl.message = 'ok its unique username'
                    def.resolve()
                }, function(err) {
                    ctrl.message = err.message
                    def.reject()
                })
                return def.promise;

And in HTML

            <div ng-show="form.username.$touched && form.username.message">
                {{form.username.message}}
            </div>

In short, do not put message inside ctrl.$error if you want to put non-error message as well

这篇关于AngularJS：为什么我的领域失效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！