Validation with passed pattern from variable doesn't work with modifiers

[vchampion]

When you want to pass regular expression as validation pattern for input from variable it works well if you don't use slashes (delimeters) and modifiers, but when you try pass regexp with modifiers (as i, g ..) validation is broken.

See example fiddle

[gkalpak]

As explained in the docs:

[ngPattern] sets pattern validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. [...]

_{(emphasis mine)}

The wrapping in ^/$ is to match the behaviour of HTML5's pattern attribute, which should match the whole input. If you want to use a RegExp with flags, you have to reference a RegExp object directly:

<input ... ng-pattern="myRegExp" />

.controller('SomeCtrl', function SomeCtrl($scope) {
  ...
  $scope.myRegExp = /.../i;
})

Demo

---

BTW, since you mentioned the g flag, note that it is not a good idea to use it (as mentioned in the docs as well):

[...]
Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.

---

Closing as it works as expected.

[vchampion]

Yes, you are right, if regular expression is set as

$scope.myRegExp = /.../i;

it works as expected, but if you store it as string it doesn't work.
I updated my fiddle with usage of

<input ... ng-pattern="myRegExp" />

and it still doesn't work.

I need to use regexp as string because it fetched from database.
I also modified your example to show this bug

[vchampion]

As i see in code, my example should work because in angular.js you can find that lines

forEach(ALIASED_ATTR, function(htmlAttr, ngAttr) {
  ngAttributeAliasDirectives[ngAttr] = function() {
    return {
      priority: 100,
      link: function(scope, element, attr) {
        //special case ngPattern when a literal regular expression value
        //is used as the expression (this way we don't have to watch anything).
        if (ngAttr === "ngPattern" && attr.ngPattern.charAt(0) == "/") {
          var match = attr.ngPattern.match(REGEX_STRING_REGEXP);
          if (match) {
            attr.$set("ngPattern", new RegExp(match[1], match[2]));
            return;
          }
        }

        scope.$watch(attr[ngAttr], function ngAttrAliasWatchAction(value) {
          attr.$set(ngAttr, value);
        });
      }
    };
  };
});

So, string regexp should transformed to object and then used in the directive code

var patternDirective = function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;

      var regexp, patternExp = attr.ngPattern || attr.pattern;
      attr.$observe('pattern', function(regex) {
        if (isString(regex) && regex.length > 0) {
          regex = new RegExp('^' + regex + '$');
        }

        if (regex && !regex.test) {
          throw minErr('ngPattern')('noregexp',
            'Expected {0} to be a RegExp but was {1}. Element: {2}', patternExp,
            regex, startingTag(elm));
        }

        regexp = regex || undefined;
        ctrl.$validate();
      });

      ctrl.$validators.pattern = function(value) {
        return ctrl.$isEmpty(value) || isUndefined(regexp) || regexp.test(value);
      };
    }
  };
};

So, but what happens? In first step correct object of regexp is really created and passed to the directive, when it set as value to pattern attribute of element (observer called at this moment) it casts to string and embraced with ^ and $ which is not correct.

Also, really, if I create RegExp object as

    $scope.incorrect_pattern = new RegExp('[a-z]+','i');

and pass it to input it works.. but what if I pass only regexp string with modifiers? Is first code described above designed not for this?

[gkalpak]

It would work if you set it directly (e.g. ng-pattern="/[a-z]+/i", but interpolation won't work as expected.
(It will come later and overwrite the attr.ngPattern with a string value.)

This should be fixable, but interpolation isn't supposed to be used on attributes that evaluate Angular expressions (it works sometimes, but it is mostly by chance and not future-proof).

I suggest you create a little utility function that converts the regular-expression string to a RegExp object.
(Another demo)

---

I am re-opening this, since we might want to fix it anyway.

[Narretz]

@gkalpak Do you mean fixing interpolations inside evaluated expressions or is there a more specific problem with ngPattern?

[gkalpak]

No, I meant with ngPattern. It might be a good idea to move the logic that parses strings like '/.../' to RegExp Objects inside patternDirective.
(But I haven't thought this through yet.)

[gkalpak]

@Narretz, #12918 is what I had in mind. _{(It might be kind of a BC though.)}