angularjs - issue with ngPattern -

i trying design nifty expiration date input on credit card checkout form automatically insert " / " between expiration month , year while user typing. model no longer picks input value since have introduced ngpattern validation input. angular allows model pick input value once validation has succeeded. makes nifty feature not work due code. can find way around this. below code.

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"> 

controller function

vm.updateexp = function(){     var separator=" / ";      //add separator     if(vm.cf.exp.length==2){//-----> cannot process since ngpattern makes exp undefined till pattern 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);;     } }; 

why not validate manually using regular expression instead of having done using ng-pattern? can set $validity of field manually angular using ng-pattern.

in html add

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

form.exp form , name of input field. not know form name have replace accordingly.

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 whatever name want, used name pattern };