0

I have an AngularJS project where I am using NgMask plugin, I want to force users to enter a specific pattern inside an input box.

Pattern example goes like: X01Y1234Z55

Where X,Y and Z are static characters, and users shouldn't be able to enter any other characters other than them, and the digits count should remain the same, X .. 2 Digits .. Y .. 4 Digits .. Z .. 2 Digits.

I have tried to use:

<input type="text" ng-model="unique_id" mask="X99Y9999Z99" restrict="reject">

but unfortunately that didn't work.

I am not familiar with Regex complicated stuff, so I am hoping that some Regex experts can help us out with that.

Thanks.

tinyCoder
  • 350
  • 13
  • 37
  • You will need to roll out your own regex. The NgMask has no way to redefine the [masks](https://github.com/candreoliveira/ngMask/blob/master/src/services/maskService.js#L16). – Wiktor Stribiżew Feb 13 '19 at 00:57
  • I think I can add the mask to the script if I knew what is it. No? – tinyCoder Feb 13 '19 at 01:20
  • It is a basic regex that you can learn in half an hour at http://regexone.com. `^X\d{2}Y\d{4}Z\d{2}$` or `^X[0-9]{2}Y[0-9]{4}Z[0-9]{2}$`. See https://regex101.com/r/wZdVhs/1. It is a regular expression, but ngMask does not accept regex as a mask, you need to implement the regex check yourself in the ng model using `pattern` (or `ng-pattern`) attribute. If you share the code we could help more. – Wiktor Stribiżew Feb 13 '19 at 07:46
  • Thank you. My project is really big and I cannot separate it to show an example, but ngMask already provides example [here](https://github.com/candreoliveira/ngMask/tree/master/examples). I added your pattern to the `patterns` object in the ngMask script and gave it a random name to test, unfortunately non of the ones you shared worked, with `restrict="reject"` (which i really need) your patterns prevented me from inserting anything. – tinyCoder Feb 13 '19 at 09:59
  • I told you ngMask does not accept regex, why even try to put it there? Implement the regex validation using Angular. There are plenty of resources here and in the Web. – Wiktor Stribiżew Feb 13 '19 at 10:01
  • Sorry Wiktor I apologize, I might be got you wrong. I can do it using `ng-pattern` but then that will not prevent the user from inserting wrong pattern data, it just doesn't validate the value. I'll give it a check, thank you so much for the time! – tinyCoder Feb 13 '19 at 10:03
  • I know. There are other ways, like using the regex with the ng model that will validate live. I remember this question but cannot find it now. If I find I will share. – Wiktor Stribiżew Feb 13 '19 at 10:04
  • Would using this directive be a good approach to do it? https://stackoverflow.com/a/18984874/2654691 – tinyCoder Feb 13 '19 at 10:09
  • Yes, using the directive is the right way. – Wiktor Stribiżew Feb 13 '19 at 10:11

1 Answers1

0

Try using pattern attribute of input as below.

<input pattern="X[0-9]{2}Y[0-9]{4}Z【0-9】{2}" />
Bijay Yadav
  • 928
  • 1
  • 9
  • 22
  • Thank you, unfortunately that did not work with my case using ngMask. Even `ng-pattern` , your pattern might be correct but it didn't work with my case. – tinyCoder Feb 13 '19 at 09:55