patternDirective does not adhere to as how pattern is specified in HTML5

[gweax]

On an input like that

    <input type="password" pattern="\d{4}" ng-model="pin">

Angular accepts an input of four or more digits, while browsers only accept an input of exactly four digits. See http://plnkr.co/edit/9LeAPND933Byv4uQ3dT9?p=preview
The reason behind this, is that the standard implies the pattern to have to match the whole string [1]:

The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.

This implies that the regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a ^(?: at the start of the pattern and a )$ at the end).

In my opinion, Angular should follow the spec. Yet I am aware that a fix would be a breaking change.

[1] https://html.spec.whatwg.org/multipage/forms.html#attr-input-pattern

[Narretz]

There is currently no support for the pattern attribute; there is only the separate ng-pattern which works similar, but with those differences:
So there are currently those differences between HTML5 pattern and ng-pattern:

• if the regex is not a scope property, the ng-pattern attribute must evaluate to a regex, i.e./^\d{4}$/
• ng-pattern doesn't in fact apply start and end anchors on its own

Correct support for pattern is possible, but the changes to ng-pattern would be breaking.

[Narretz]

Sorry, you are right pattern is evaluated as the patternDirective.

[Narretz]

Wait a second ... it's not exactly the same. If patternwas the same as ng-pattern, a pattern attribute like \d{4} would not throw, but it does. It's possible that there is some HTML constriant validaiton going on, but I have to look further.

[caitp]

@matsko had fixed this a while ago --- but it's likely that 1.2.x is not using the updated code.

[Narretz]

What, this is on 1.2.x. No wonder I am confused.

[Narretz]

Wait, the plunkr is not in 1.2.x, it's 1.3.1. I'm out for now, will investigate later.

[caitp]

oh I see, yeah. so there is a bug still.

The issue seems to be this: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L2579-L2581

in HTML, pattern is a regexp pattern which matches the entire string --- so basically the equivalent of ^{{pattern}}$ --- but we aren't generating such a regexp.