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?

Removing the ^ from ng-pattern does not fix this problem for me. — a2f0, May 29 '16 at 21:31

score 1 · Answer 1 · answered Feb 16 '15 at 21:15

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.

Piotr Lewandowski · Answer 2 · 2017-02-23T18:02:30.940

Angular 1.3.19 changed behaviour of ng-pattern that breaks ui-mask.

Currently, ng-pattern directive validates $viewValue instead of $modelValue - Reference in changelog.

Angular team provided custom directive which reverts previous behavior. It is good workaround for this problem.

You have to add pattern-model attribute to fields when you use both ui-mask and ng-pattern.

<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]$/"
       ui-mask="99:99:99"
       pattern-model
/>

Code of the directive (add it to your codebase):

.directive('patternModel', function patternModelOverwriteDirective() {
  return {
    restrict: 'A',
    require: '?ngModel',
    priority: 1,
    compile: function() {
      var regexp, patternExp;

      return {
        pre: function(scope, elm, attr, ctrl) {
          if (!ctrl) return;

          attr.$observe('pattern', function(regex) {
            /**
             * The built-in directive will call our overwritten validator
             * (see below). We just need to update the regex.
             * The preLink fn guarantees our observer is called first.
             */
            if (angular.isString(regex) && regex.length > 0) {
              regex = new RegExp('^' + regex + '$');
            }

            if (regex && !regex.test) {
              //The built-in validator will throw at this point
              return;
            }

            regexp = regex || undefined;
          });

        },
        post: function(scope, elm, attr, ctrl) {
          if (!ctrl) return;

          regexp, patternExp = attr.ngPattern || attr.pattern;

          //The postLink fn guarantees we overwrite the built-in pattern validator
          ctrl.$validators.pattern = function(value) {
            return ctrl.$isEmpty(value) ||
              angular.isUndefined(regexp) ||
              regexp.test(value);
          };
        }
      };
    }
  };
});

Issue in ui-mask GitHub - Reference.

Angularjs ui-mask with ng-pattern

2 Answers2