Angular ngx mask issue when mask has multiple optional numbers (9)

Question

I'm trying to implement a mask for iban input. The mask is "SS00 AAAA 0000 0000 0000 9999 9999 9999 99". For some reason the mask bugs out when the optional numbers come in. It'll display a space instead of a 9 basically making it SS00 AAAA 0000 0000 0000 9999 999 999 9. Any reason why this is happening or how to solve it?

Answer 1

I had this exact same problem, and even if this question is kinda old, i thought it could still be helpful to share my solution

For an unknown reason, mask will have issues with characters groups that start by optional, not matter if you use space or -, or anything, as separator

A work around is to use a non optional character as first after each separator

In your case, it would be like : SS00 AAAA 0000 0000 0000 0999 0999 0999 09

Keep in mind that adding those non optional will increase the minimal length, so you have to add optional somewhere else to keep the length you want

For example : SS00 AAAA 0000 0009 0999 0999 0999 0999 09 (Don't worry, even if it looks different from the result wanted, in the input it would look the same as intended)

Hope this will help other people facing this issue!

(PS: don't forget that in some country, IBAN can contain letters as well as numbers, so maybe make custom optional character to allow alphanumeric, and have something closer to : SS00 AAAX AXXX AXXX AXXX AXXX AXXX AXXX AX where X will be your custom character)