In this lecture, we are going to talk about input masking for the phone number field.
It's likely you will need to format a fields value.
For example, phone numbers have the first three numbers wrapped with parentheses.
This formatting may vary from country to country.
If we're asking for a phone number, we should receive it in the correct format.
By default, browsers don't format values.
Whatever we type into the input is what we get.
We can't expect users to format a value correctly.
They may make mistakes or have no idea how to format a phone number.
If we want to force formatting, we could implement something called input masking.
It's a technique for constraining user input.
There are a great way to reduce confusion about why an input value may be incorrect, while also ensuring
data is in the required format.
We can use an input mask to deny the user from inputting alphabetic characters at the same time, we
can assist them by formatting their input.
Overall, it provides a better user experience.
It will make more sense once we see an example.
Input masking can be difficult to implement.
It doesn't come out of the box from Angular.
There are various ways to add input masking to an app.
In my opinion, it's going to be so much faster to use a library.
There are a lot of edge cases to consider.
A library will suffice for this problem.
In the resource section of this lecture, I provide a link to a library called NGS Mask.
This plugin can help us with input masking.
It's effortless to install and use open the command line in your editor.
We will run the following command NPM install dnsmasq.
The Mask Library conveniently exports a set of classes that can be registered with modules.
It's a common practice found among most libraries.
Let's think about where to import these classes.
Input masking should be applied to the input component.
The input component is declared under the shared module.
Therefore we should import the Pnnx mask library into the shared module.
Open this file in your editor at the top of the file.
Import two declarations called provide environment, NG mask and Ng's mask directive from the Ng's mask
package.
Next scroll to the imports array.
The mask package exports a directive we can use to apply to form elements to apply masking.
This would be the mask directive class.
Afterward.
There are services available that are injectable that we may need inside the module configuration at
an array called providers.
Unlike components or directives, services from other packages can be registered.
By adding them to this array, let's call the provide environment NG mask function to grab those services.
We can move on to using the library.
We're in a bit of a pickle.
Before we can use this library, we need to consider the following.
Does every input need masking?
The answer is no.
We should conditionally apply input masking to our inputs.
We're outsourcing the input in a component for reusability reasons.
Attributes applied to the input element will be used on every instance of this component.
This can be problematic because we may not want input masking on every component.
We should make input masking optional in the input component class.
We should create a property for toggling input masking on the input.
The property should be configured by the parent component.
If the parent component does not pass down a value, we will assume input masking should be disabled.
Open the input component class file.
Inside the class we will create a property called format with the input decorator.
Ahead of time.
I know the input masking library will ask for a string for formatting the value.
Therefore, the type of our property should be set to string.
However, we want this property to be optional.
We can prevent Dnsmasq from working by setting the value to an empty string.
We've effectively turned off input masking unless we override the value.
The next step is to apply masking to the input element in the template.
Open the input template file.
On the input element.
We need to bind the mask directive to our format property.
After registering the Pnnx Mask module, we can add the mask directive to enable input masking on an
element.
Luckily, this property won't affect our other inputs as long as the string is empty.
Input masking will be applied to inputs that don't need them.
The inputs will behave normally.
Before going further, we should test if our input is still functional.
Open the form in the browser.
Everything works as before.
We can type in any of the inputs.
The same validation rules will get applied.
This is precisely what we wanted.
We've made input masking optional.
Let's start working on the phone number field.
We will begin this task in the next lecture.