ngPattern 问题

Question

我正在尝试在信用卡结帐表单上设计一个漂亮的到期日期输入，当用户输入时，它会自动在到期月份和年份之间插入一个“/”。该模型不再获取输入值，因为我已将 ngPattern 验证引入到输入中。 Angular 只允许模型在验证成功后获取输入值。由于我的代码，这基本上使我的漂亮功能无法工作。有人能找到解决办法吗？下面是我的代码。

html

<input ng-keyup="checkout.updateExp()" class="form-control" type="text"  maxlength="7" placeholder="mm / yy" required autocomplete="off" name="exp" ng-pattern="/\d{2}\s\/\s\d{2}/" ng-model="checkout.cf.exp">

控制器功能

vm.updateExp = function(){
    var separator=" / ";

    //add separator
    if(vm.cf.exp.length==2){//-----> cannot process since ngPattern makes exp undefined till pattern is met
        vm.cf.exp = vm.cf.exp.substring(0,2) + separator;
    }
    //remove separator
    if(vm.cf.exp.length==4){
        vm.cf.exp = vm.cf.exp.substring(0,1);;
    }
};

Answer 1

为什么不使用正则表达式手动验证它而不是使用 ng-pattern 完成验证？您可以手动设置字段的 $validity，就像 angular 使用 ng-pattern 那样。

在html中添加

ng-keyup="checkout.updateExp(form.exp)" name="exp"

form.exp 是表单，然后是输入字段的名称。我不知道表单名称是什么，所以您必须相应地替换它。

vm.updateExp = function(formModel){
    /* existing code omitted */
    var expression = /\d{2}\s\/\s\d{2}/; // create RegEx
    formModel.$setValidity("pattern", expression.test(vm.cf.exp)); // set validity to whatever name you want, I used the name pattern
};

ngPattern 问题

issue with ngPattern

angularjs

ng-pattern