问题与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，就像使用ng-pattern一样使用angular。

在html add

中

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