CODEWITHSUNDEEP
regexangularjsng-patternangularjs-ui-utils
user3056462
user3056462

Reputation: 75

Angularjs ui-mask with ng-pattern

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?

Upvotes: 5

Views: 8607

Answers (2)

Piotr Lewandowski
Piotr Lewandowski

Reputation: 6840

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.

Upvotes: 0

tgrux
tgrux

Reputation: 103

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.

Upvotes: 1

Related Questions