search

JsDaddy / ngx-mask

Angular Plugin to make masks on form fields and html elements.
https://jsdaddy.github.io/ngx-mask
MIT License
1.16k stars 300 forks source link

Multiple mask in one input not working (Allow few mask in one expression) #1432

Open elir-castro opened 2 weeks ago

elir-castro commented 2 weeks ago

🐞 bug report

Is this a regression?

Yes, the previous version in which this bug was not present was: 13.1.15.

I also tried with 16.4.2 and it doesn't work too

Description

this two mask individually works: `

`

but if I try to use multiple mask, it doesn't:

`

`

🔬 Minimal Reproduction

Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/edit/stackblitz-starters-rqktmh?file=src%2Fapp%2Fapp.component.html

biel-correa commented 2 weeks ago

@elir-castro Please update your first example, the mask is S00||00.0 but the label is S00||S00.0

Testing

I did some testing on your stackblitz, looks like the package gives priority to the smallest mask.

S00||00.0: You can match both masks since they have the same length S00||S00.0: You can only match the first one since the seccond has more characters 00.000.000-A||00.000.000: You can only match the seccond one since it's the smallest 00.000.000||00.000.000-A: Only the first one because it's the smallest

Possible solution

Solution 1: To solve this we need to add to the matcher a condition to check if the input has multiple masks and allow the user to type in even if the value has more characters than one of the masks. Solution 2: Only limit the input length by the number of characters of the biggest mask. Remember to remove symbols before checking the mask size

I don't know about the project structure so I'm just guessing here

Improvement

Skip the masks that have less characters than the current value since they will allways return false

elir-castro commented 2 weeks ago

Hi, Biel, thank you.

I updated the code: https://stackblitz.com/edit/stackblitz-starters-rqktmh?file=src%2Fapp%2Fapp.component.html

I think the problem only appears when using some special character, like: (. and -) as I showed in the link above. Because if you try to do the same validation with the same masks without the special characteres, it works fine, even if the length of mask is different, this behavior did not appear in old versions like 13.1.15.