AngularJS 1.3 pattern validation binding not working

Question

I have been using Regex pattern validation with AngularJS for the last several versions and it has worked fine.

My application requires that validation patterns are exposed by a scope property, to which the corresponding AngularJS validation directive is bound. Prior to v1.3, it looked something like this:

// On the controller
$scope.validationPattern = "^\\d*$"; // Allow only numeric digits

<!-- in the HTML page --->
<input type="text" name="age" ng-pattern="/{{validationPattern}}/" />

Having now updated AngularJS to v1.4 (bypassing v1.3), I find that the above approach no longer works. Looking at the migration notes for v1.3, I see that this is expected behavior and that a new approach is required, which looks something like this:

// On the controller
$scope.validationRegexp = /^\d*$/; // Use a RegExp instead of a string

<!-- in the HTML page --->
<input type="text" name="age" pattern="{{validationRegexp}}" />

However, I simply can't get this to work. If I place the validation pattern inline (within the HTML input element) it works fine, but when moved onto the scope object and bound to the pattern or ng-pattern directive, no validation occurs.

Here's a JSFiddle that demonstrates the problem.

Any suggestions please?

possible duplicate of Directive to dynamically create an ng-pattern — Fals
– Fals, Commented Jul 9, 2015 at 16:29
You need only the scope variable name: ng-pattern="validationPattern" — Fals
– Fals, Commented Jul 9, 2015 at 16:30
@Fals. Yes, you're right that it works with just the scope variable name in ng-pattern. It seems that the release notes are wrong. If you post this as an answer I'll accept it. — Tim Coulter
– Tim Coulter, Commented Jul 9, 2015 at 16:43

Fals · Accepted Answer · 2015-07-09 16:45:32Z

1

You should use only the name of the scope variable:

<input type="text" name="age" ng-pattern="validationPattern" />

answered Jul 9, 2015 at 16:45

Fals

6,8394 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS 1.3 pattern validation binding not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related