{"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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1472"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1472\/revisions"}],"predecessor-version":[{"id":1484,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1472\/revisions\/1484"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}