angular-ui / ui-mask

Mask on an input field so the user can only type pre-determined pattern
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html
MIT License
391 stars 257 forks source link

doesn't work with ng-pattern #165

Closed phazei closed 8 years ago

phazei commented 8 years ago

I have an input:

<input input-aurea type="text" name="ssn" placeholder="Social Security Number" ng-model="detail.ssn" ui-mask-placeholder ui-mask="?999-99-9999" ng-pattern="/^(?!(000|666|9))\d{3}(?!00)\d{2}(?!0000)\d{4}$/" validate-messages="{pattern:'Invalid SSN.'}" ng-required="true">

In 1.8.6 it always shows invalid ssn because the pattern is checked before the mask clears?

In 1.4.5 it actually worked just fine in all browsers except FF. In FF, after inputting a number, it's invalid, but then unfocus, focus, unfocus and it's ok.

phazei commented 8 years ago

I tried a bunch of the versions

It seems to work on all browsers on 1.6.8, but it will show an ng-pattern error once 8 of the 9 characters are entered, but is good on char 9.

1.7.0 it works everywhere but FF, there it is always invalid. But in 1.7.0 the error doesn't show up when 8 of the 9 characters are entered

1.7.1 it doesn't work in any browser

lukepfeiffer10 commented 8 years ago

Try it with this regexp instead ^(?!(000|666|9))\d{3}-?(?!00)\d{2}-?(?!0000)\d{4}$.

I added -? to the expression in a couple places to match where the hyphens are in a SSN and used the ? operator in case there is some reason the hyphens are being excluded in certain cases.

It appears that ng-pattern is testing the viewValue of the element which contains the mask characters (in this case the hypens). Not sure how it was working in older versions of ui-mask probably an issue with those versions...

phazei commented 8 years ago

that seems to have worked!