{"id":1472,"date":"2023-09-19T05:00:00","date_gmt":"2023-09-19T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1472"},"modified":"2023-09-14T15:14:08","modified_gmt":"2023-09-14T22:14:08","slug":"ngx-mask-for-user-input-masking","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/ngx-mask-for-user-input-masking\/","title":{"rendered":"ngx-mask for user input masking"},"content":{"rendered":"\n

HTML forms are evolving but still lacking a little in masking, which really means “suggesting the proper format to the user.<\/p>\n\n\n\n

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:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This is where ngx-mask<\/a> helps. It’s a third-party library that passes my acceptance criteria for dependencies<\/a>. ngx-mask comes with directives and pipes to implement customizable masks. <\/p>\n\n\n\n

To install it: npm install ngx-mask<\/code><\/p>\n\n\n\n

You can find out how to configure the library here<\/a>. Here is an example of the mask directive used for a US phone number:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And another one for a French phone number that doesn’t show the mask as we type but still enforces it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The result looks like this:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Here is a link to my example on Stackblitz<\/a>.<\/p>\n\n\n\n

You can try many different demos on this website<\/a>. The library supports regular expressions and lots of other options, such as a validation<\/code> attribute to invalidate the form when the input is invalid:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

And it’s possible to have multiple different acceptable formats on a mask, too:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,22],"tags":[],"class_list":["post-1472","post","type-post","status-publish","format-standard","hentry","category-angular","category-forms"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t