Up next in 10
Angular ngx-mask Example to Mask HTML Form Input Fields With Patterns & Validations in Browser
Jun 9, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys uh welcome to this live
0:04
stream so in this live stream I'll show
0:06
you a very important angular module
0:09
which allows you to mask your HTML form
0:12
input fields to receive various kinds of
0:14
data that you can have you can have a
0:17
phone number currency code credit card
0:19
number postal code IP address
0:22
uh any sort of custom pattern or
0:25
validation so you can mask your input
0:27
field so we'll show you this example so
0:30
let's suppose you want to receive a
0:32
phone number in various format so we
0:35
actually added this mask here
0:38
and this is actually if the user writes
0:41
the phone number then automatically that
0:43
pattern will be you can see that so it
0:46
will be entered in this pattern
0:49
automatically the user is just entering
0:51
the numbers but it is automatically
0:53
reflecting to that pattern like this it
0:56
is automatically adding these
0:58
parenthesis you the user don't need to
1:01
do this similarly if you are receiving
1:03
time input the user simply types the
1:05
time and automatically the this colon is
1:10
automatically added similarly credit
1:12
card number which is the space is
1:15
automatically added the user don't want
1:18
to press the space key they just want to
1:20
enter the number so this is really
1:22
important you have seen on websites
1:25
which have this functionality similarly
1:27
you can even add string as well it
1:30
hyphen will automatically be added ip
1:33
address the dot symbol will
1:35
automatically be added like this if you
1:37
see you can receive a pattern inside the
1:41
mask property you just need to specify
1:43
whatever is the pattern you want to
1:46
receive and instantly it will be
1:48
reflected back so there is this package
1:50
here if you go to
1:52
npmjs.com
1:54
ngxmask so this is essentially this
1:57
module specifically built for angular
2:00
applications so the command is simple
2:02
npm
2:04
ngxmask so just install this module
2:07
after installing it I'll show you first
2:10
of all you need to go to this
2:12
app.module.ts file and you just need to
2:15
register it so once you register it by
2:17
adding this import line import in curly
2:21
brackets ngxmask module coming from
2:25
ngxmask and then go to the imports array
2:28
right here simply add this ngx mask
2:31
module for root and here you need to
2:34
pass this property show mask type to
2:36
true and for this you don't do need the
2:39
built-in forms module of uh angular so
2:43
you just need to import the form modules
2:45
as
2:46
from add the rectangular/formms and
2:48
again go to the imports array just add
2:50
the forms
2:52
module so after that you can simply
2:56
don't need to write anything in the
2:58
app.component.ts file you can directly
3:00
go to the app dot component html start
3:02
writing this so the syntax is really in
3:05
simple you actually put whatever input
3:08
that you want to receive and in this
3:11
case we are receiving a mobile number so
3:13
here we simply pass this attribute here
3:18
mask and here you specify the
3:21
pattern in which you want to receive the
3:24
numbers so in parentheses three numbers
3:26
first and then
3:30
dash so it's a 10digit number the first
3:33
three digits will be like this then we
3:36
have like this so as soon as the user
3:39
enters the number the pattern will be
3:42
reflected back you can see that so it's
3:45
a quite a useful module guys similarly
3:47
for receiving time we can add the mask
3:50
here which is this colon automatically
3:52
be added like
3:55
this and if you're receiving a credit
3:58
card number as well so you can add the
4:01
spaces in the mask here automatically as
4:04
the user types it they don't want to uh
4:06
just put the spaces so this is a very
4:10
good module guys similarly for IP
4:12
address as well you can add the dots
4:17
here like
4:19
this the dot will automatically get
4:22
added you can even have custom patterns
4:24
as well you just need to specify it in
4:27
the mask here you can also include
4:30
strings alongside with the digits as
4:32
well so as soon the first three letters
4:34
needs to
4:36
be so they like
4:39
this so this is a great module guys uh
4:42
just install it and just start using it
4:46
inside your angular application and also
4:49
check out my website free media
4:51
tools.com which contains thousands of
4:53
tools regarding audio video and image
4:56
please hit that like button subscribe
4:58
the channel and I will be seeing you in
5:01
the next live stream