Top 5 Features of Angular Input Mask

[{"selector":"#anim-bd0725eb-f66a-4b78-a186-0656cdcf4ae2","keyframes":{"transform":["translate3d(-125.08834%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fc2a30a2-527f-40fb-aba0-53fe38beb457","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9199b846-83b0-401a-852e-dafc7c505ca7","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-88f80152-406f-4f8f-86fb-6dbd7b260c74","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-fb42563a-520c-46d2-bd61-43c5576c023c","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] · Standard Mask · Developers friendly APIs · Regular Expression · Form support and validation · HTML5 input type support Explore the Top 5 Features of Angular Input Mask

Standard Mask

[{"selector":"#anim-ec651452-9304-47f0-9a92-1044a06adc52","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b74d1e7c-d57d-4a97-97ba-110afe2bd2a6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-77a278da-1335-4d65-aae3-def7278a7015","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-c80bb83d-b4cd-4087-a6d2-d476af96d3aa","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ced9c9b1-22b6-4eb0-9f57-8c379b33af9d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3e55dadb-d33a-4708-8171-7cdf7efd2ae1","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] This feature is a combination of standard and custom mask elements that validate the user input.

Developers friendly APIs

[{"selector":"#anim-84b42578-fb7a-4101-9859-826a9456c4e9","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0d63ca0b-c746-4fcf-8f42-ba1010c65d6b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cbc7ffbe-15de-4e72-80d2-ca60f0da028f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-1c3f8d24-c7f7-4d36-8f0b-8cdf5b7bf62f","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-98813b23-e069-44b8-8b9c-aa8b0f2c67eb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-314d00ef-3144-4e55-b616-26e2f260f9dc","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Developers can customize all UI elements and control behaviors using client-side APIs.

Regular Expression

[{"selector":"#anim-120ca7ed-eb4b-4c6d-8fb0-fd0f4d6ead97","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f60dad83-2f82-479a-8106-62671ca3978a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c7541321-64ce-42c8-8116-1af1235e27b8","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-02ad214e-1dec-4d91-a94c-a5af992e3757","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-64a17a7c-946d-48f0-ad98-2d8ce5c8c77b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2604d598-753f-476e-b08e-da9407018e21","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Angular Input Mask elements can be regular expressions, useful when defining user-specific data such as IP addresses.

Form support and validation

[{"selector":"#anim-fccfe70b-a227-493b-abe4-b20b31b89a87","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7c25bb14-6c03-4aec-a02e-142ff285f8ac","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-378b9a8b-2523-4e7e-990d-f4dabe37fa65","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-de284511-c915-4f99-b794-8ee3591b78e5","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-85a8f87d-a2b4-4fcb-b1e0-7c3be30a5285","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d3d0cc78-7db6-4eb2-8111-12bf07810312","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] When submitting a form, the input mask validates whether the entered data is in the specified format.

HTML5 input type support

[{"selector":"#anim-77a94e90-0c11-4c34-b167-239d2a992528","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9fd982bf-22a0-4d41-a951-8b379a562402","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-db16c1c4-78af-44ec-ae1f-2451747a5e9c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-776d1ee8-dd4d-445e-93ac-e554968a15c2","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1642dfab-6b2d-4414-b1fd-c7f3515aba2f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-83fc963e-cc7b-4947-b897-db9e96259926","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Users can create masked textboxes from HTML5 tel input, to obtain number-only inputs.

Syncfusion’s Angular Input Mask

[{"selector":"#anim-e6ff3ad6-0543-41bf-a84f-93b32dfdc35f","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":1,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] Syncfusion’s Angular Input Mask is a component that provides an easy and reliable way to collect user input, to validate data values. No credit card required.