Angularjs ui-mask with ng-pattern

Question

below code is not working..

<input type="text"
       class="form-control input-sm"
       placeholder="hh:mm:ss"
       name="hhmmss"
       ng-model="data.hhmmss"
       ui-mask="99:99:99"
       ng-pattern="/^([0-2]|0[0-9]|1[0-9]|2[0-3]):?[0-5][0-9]:?[0-5][0-9]$/"
/>

when input value is 20:00:00, then formName.hhmmss.$error.pattern is true.

if remove ui-mask:

<input type="text"
       class="form-control input-sm"
       placeholder="hh:mm:ss"
       name="hhmmss"
       ng-model="data.hhmmss"
       ng-pattern="/^([0-2]|0[0-9]|1[0-9]|2[0-3]):?[0-5][0-9]:?[0-5][0-9]$/"
    />

when input value is 20:00:00, then formName.hhmmss.$error.pattern is false.

How can I use regex in ng-pattern?

Answer 1

I had the same issue and altered the mask.js file to update the scope value on keypress. There is a line of code which does this but isn't run all the time.

controller.$setViewValue(valUnmasked);

Update the if statement to the following:

if (valAltered || iAttrs.ngPattern) {

That will run "scope.apply" on keypress and update the model.