Angularjs Confirm Password指令:为什么它看不到键盘输入?

时间:2015-10-04 12:55:17

标签: javascript angularjs angularjs-directive

我在Angular.js中构建自己的'Confirm Password'指令。我从这个pen得到了灵感。

我的指示:

directives.directive('pwCheck', function(){
return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl){
        var pw1 = attrs.pwCheck;
        var pw2 = attrs.ngModel;
        scope.$watchGroup([pw1,pw2],function(value){                                                                                           
            console.log(value);                                                                                                                
            ctrl.$setValidity('pwmatch', value[0] === value[1]);                                                                               
        });                                                                                                                                    
    }                                                                                                                                          
}                                                                                                                                             
});

我的表格:

<input type="password" class="form-control" name="newpassword" placeholder="Type your new password" ng-model="newpassword" 
ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/"
ng-minlength="8" ng-maxlength="20" ng-required="" />

<input type="password" class="form-control" name="renewpassword" id="renwewpassword" placeholder="Type your new password again"  
ng-model="renewpassword" ng-required="" pw-check="newpassword" />

但是,watchGroup似乎没有捕获“newpassword”中的更改(击键)。 指令中的console.log()将为undefined打印value[0],同时为value[1]打印正确的输入。

我无法弄清楚问题出在哪里。任何线索?

1 个答案:

答案 0 :(得分:1)

我使用您的代码设置fiddle,似乎工作正常。但请记住,除非满足所有验证,否则不会填充第一个输入的ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/" ng-minlength="8" ng-maxlength="20"

ABCDabcd1234

如果您使用有效密码进行测试,例如magic_quotes_gpc = Off ,您会看到两个值都已填充,并且两个输入中的击键都被选中。

来自Angular Forms guide

  

除非通过验证,否则不会设置ngModel的值   输入字段。例如:电子邮件类型的输入必须具有值   user @ domain的形式。