Ngx-mask: Mask with 9's allows to input special characters and from there on fails

[Knochenmark]

A mask containing only 9's allows to input special characters such as slashes, quotation marks, brackets etc. and from there on allows to input characters too.

Expected:
The digit only mask should prevent the input of special characters.

Current:
The digit only mask allows special characters and breaks once one of them was used.

[jake-brandt]

Our team just ran into this today - a temporary workaround would be to ensure form validation as well. It won't stop the user but it'll at least warn them after they type the characters. Going to try and help out on this tonight - love this library!

[jake-brandt]

@Knochenmark the library will default to a predefined list of what it considers "special characters", and when one of these characters is encountered - _and the character slot is optional (as is the case with 9)_ - it will allow entry of the special character.

To achieve your expected behavior, you'll want to override this list of special characters by including the specialCharacters parameter on your textbox - for example:

/*
 * Accept a ZIP or ZIP+4 code
 * https://www.zip-codes.com/learn-about/what-is-a-zip-4-code.asp
 */
<input placeholder="ZIP code"
       mask="99999-9999"
       pattern="^[\d]{5}(-[\d]{4}){0,1}$"
       [specialCharacters]="['-']" />

If you do not want _any_ special characters, you can pass in an empty array into specialCharacters instead (<input ... specialCharacters="[]" />)

That being said... it does appear there is an error occurring after the special character is allowed. For example, typing a hyphen/dash into the ZIP code box would result in a JS error and all subsequent validation is disrupted. If you don't want _any_ special characters, I don't think this bug will affect you as long as you provide the empty array of special characters; but in my case, where the hyphen is needed for ZIP+4 format, I'm still going to experience errors. Going to start stepping through the code to see what's up.

[Knochenmark]

@jake-brandt Yep, that error plus missing subsequent validation is exactly what I meant and why I opened the bug. Thanks for pointing out the special characters array. As far I remember, it actually works for the non optional mask with 0 instead of 9, but I would have to verify that.

[jake-brandt]

@Knochenmark I've got a fix for this but I need to add another unit test before creating the PR. You can check that referenced commit, if you'd like to build off of source temporarily.

[babarmajeed]

@Knochenmark It's a very helpful library. Just wondering, in which version, resolution of this bug is expected to be included?

[dvenkatsagar]

Hello,

For the same discussion, I have a scenario where Im able to enter "*" for this html mockup.

<input type="text" mask="XX - 0000" [hiddenInput]="true" placeholder="12 - 3456" formControlName="value1" [validation]="true" required />

I cant enter the special character for the place where the mask is 0 but can enter the special character for the mask as "X".
The final value that gets stored into "value1" is **3456 for the value "123456" entered in the textbox.

Please let me know if this is a new scenario or is related to this. I can raise a bug based on that.

Thank you