HTML forms are evolving but still lacking a little in masking, which really means “suggesting the proper format to the user.
For instance, if I need to capture a US phone number in a specific format, I’d like to use a mask that looks like this:
We could use a placeholder, but the placeholder disappears as soon as we start typing, whereas a mask should remain visible and try to make the user input fit into that format. For instance:
This is where ngx-mask helps. It’s a third-party library that passes my acceptance criteria for dependencies. ngx-mask comes with directives and pipes to implement customizable masks.
To install it: npm install ngx-mask
You can find out how to configure the library here. Here is an example of the mask directive used for a US phone number:
And another one for a French phone number that doesn’t show the mask as we type but still enforces it:
The result looks like this:
Here is a link to my example on Stackblitz.
You can try many different demos on this website. The library supports regular expressions and lots of other options, such as a validation attribute to invalidate the form when the input is invalid:
And it’s possible to have multiple different acceptable formats on a mask, too:
