In this lecture, we are going to ask the input for the phone number.
Currently, I'm on the documentation page for the Energy X mask package.
We should take the time to understand how we can mask an input on this page.
There's a table under a section called Special Characters.
This table will give us a list of special characters we can add to the user's input.
For example, if we add the Dash character, a dash will be added to the input.
It's as simple as that.
We're allowed to add any of these characters to the mask.
Let's scroll down a little further.
We will come across another table.
The value of the input can be constrained.
Let's say we want four numbers.
We could add four zeros.
The user will not be able to input alphabetic characters.
The masking library will prevent that additional values will be prevented as well as you can probably
already guess.
We will be using a combination of special characters and constraints to help the user input their phone
number.
Open the register template file in your editor.
Search for the phone, no input, it's sure to have a comment above it that says phone number, we will
replace the input element with the app input component.
Let's work on finding the other properties before working on the format, buying the control property
to the phone number of property.
Next, we will set the placeholder property to the following message enter a phone number.
Lastly, we will add the format property.
This property is where we can add the masking to our input.
We will add the following left parentheses.
Zero zero zero right parentheses.
Zero zero zero dash zero zero zero zero.
Phone numbers can vary from country to country.
In America, the first three digits of a phone number are wrapped with parentheses.
The next three digits have a dash after them after the Dash character.
There are four more digits.
Feel free to modify the format to your respective countries format.
The Entry X Mask Library will allow the user to input up to 10 digits in the phone number of fields.
They won't have to add in the parentheses or dashes in their input.
They'll automatically be added in.
The result is the power of input masking.
Before we test our input, let's add a validator.
The Energy X mask package doesn't validate the input.
This step still needs to be handled by US Open the register component class file.
On the phone, no form control, we will add an array of validators.
We are going to add three validators.
There will be the following required minimum length, maximum length.
The minimum length and maximum length validators will have a length of 13 characters.
We are counting the 10 digits along with these special characters.
The value for the phone number should be constrained to 13 characters.
Let's try testing our input.
On the field for the phone number, we can input a range of numbers.
They'll be completely valid.
However, if we attempt to input more than 10 numbers, the masking library will not allow us.
The same behavior occurs when we try writing alphabetic characters.
This is the exact behavior we were looking for.
However, there is one problem.
If we move away from the input, an error appears.
It tells us the length of the phone number is 10 characters long.
If we count the number of characters in the input, there's 13.
So what's wrong?
Discovering the issue will require opening the angular developer tools.
Under the components section, search for the register component.
On this component, we registered the form controls for the registration fields.
Let's take a look inside the phone number.
Form control One of the properties inside this object is called value.
It stores the value of the input looking closely at storing the phone number without the special characters.
By default, the Energy X Mask Library will remove special characters from the inputs value.
If we want to keep the special characters which we do.
We need to add a property to our input.
Open the input template file.
On the input element, we are going to buying a property called Drop Special Characters.
Its value will be set to false.
The Drop Special Characters property is an option for removing special characters from an input by default,
this property is set to true special characters are removed from the input.
Switching this property to false will allow the special characters to remain.
This includes special characters we added in the format option.
Let's give our input one more test in the browser.
Try typing a new phone number.
Next, check out the value in the angular developer tools.
These special characters remain on the value.
That's awesome.
We've successfully implemented input masking, it's a feature for constraining user input.
We will want to use input masking whenever possible.
In the next lecture, we're going to start handling the form submission.