In this lecture, we are going to create a factory function for our validator.
The validator works fine, but the current implementation can be improved.
To understand why.
Let's check it out.
Open the register validators.
File in your editor.
Inside the match function, we are comparing the values from the password and confirm password controls.
We're hard coding the names of the controls in the get function.
Our function is not flexible.
If we want to select a different pair of controls, we will need to modify the validator.
We can resolve our issue with a factory function.
Factory functions are a design pattern in programming for returning a new object or function.
It's a pattern mainly aimed at creating objects, but can be written to return functions as well.
The purpose of writing a factory function is to return a function tailored to our needs.
It's perfect for our situation.
You may be questioning why we need a factory function in the first place.
That's a valid point.
The truth is we don't have any other option.
Let me show you why open the register component class file?
Scroll down to the form group class.
The second argument of the form group constructor function is an array of validator functions.
The key word here is functions.
You'll notice we're passing in the match function as a reference.
We're not immediately calling this function when we add it to the array.
Angular will call it on our behalf.
If we were to add parentheses after the match function, we would receive an error.
We're no longer passing in the function as a reference.
Instead, the values returned by the function will be added to the array.
This is normal JavaScript behavior.
However, we want to be able to specify which controls in the group should be validated.
Let's look at how other validators resolve this issue.
Above the group, we're creating the phone number control be required validator is being passed in as
a reference if we hover our mouse over this function.
It'll return either a validation errors object or null.
On the other hand, we're calling the minimum length function this time if we hover our mouse over this
function and overturn something called a validator function.
Behind the scenes, Angular has written factory functions for some of its validators.
This allows us to customize the behavior of a validator function.
If we want to be able to customize the controls used by our validator, we can rewrite our validator
as a factory function.
We will change the match function to return the function that'll perform the validation.
We will customize this function by providing it with the names of the controls.
Let's give it a try.
Switch over to the register validators.
File inside the match function.
We will return an arrow function.
Next, we are going to move the logic of the match function to the inner function.
Afterward, we will move the arguments over to the inner function.
Lastly, we will move the annotation for the return value to the inner function.
Our factory function will return the function for performing the validation, the outer function will
be responsible for accepting the names of the controls.
The inner function will have access to this information.
We should update the match functions arguments to accept the names of the controls.
You will add to arguments called control name and matching control name.
Both arguments will be annotated with the string type.
This next step is going to be optional.
We should describe the type of value returned by the match function, angular exports and interface
for factory functions that return a validator at the top of the file.
We will update the angular slash forms package to include an interface called validator function.
We can hover our mouse to learn more about this interface.
It says the following a function that receives a control and synchronously returns a map of validators
if present.
Otherwise, no, while not necessary.
This interface can be helpful for type safety.
TypeScript can help us verify we're returning a validator function.
Let's annotate the return value of the match function with this interface.
Our validator is complete.
We've removed the original behavior by allowing a component to pass in the names of the controls.
We can compare the values of any two controls.
Let's update our component in the match function.
We will pass in the names of the controls there at the password and confirm password controls, respectively.
Let's test our new validator, open the registration form in your browser.
Inside both password fields, let's type in some values as long as both values don't match.
We will receive an error.
We've successfully created a dynamic validator by using the factory design pattern.
It's a pattern for creating new functions that are tailored to our needs.
If we want to apply the same validator to a completely different set of fields we can, at the moment,
we are rendering the object below the form.
Let's do some air handling in the next lecture.