1

我正在尝试在信用卡结帐表单上设计一个漂亮的到期日期输入，当用户键入时，它将在到期月份和年份之间自动插入一个“/”。自从我在输入中引入了 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);;
    }
};
4

1 回答 1

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
};
于 2016-08-23T21:23:06.543 回答