In this lecture, we are going to continue working with our custom validator validators must return
either an object containing errors or null.
We should annotate the methods return type for type safety, angular exports, a type for a methods
return value.
We should take advantage of this type at the top of the file.
Import the validation errors type from the Angular Forms package.
Next, we will annotate the return type of the match method with this type.
We can hover our mouse over this tight to view the type of value we can return.
It's a relatively simple type definition.
We are allowed to return an object with any key value pairs.
Remember, returning an object will be interpreted as an error.
We can add information about the error through the object we're returning.
What if we want to indicate there aren't errors?
In this case, we can return null.
Let's update the return type to a union type by including nor as a possible return value.
The next step is to accept the form group at the top of the file.
We will update the import statement to include the abstract control class.
Inside the match methods arguments, we will add an argument called group annotated with the abstract
control class.
As a reminder, the abstract control class is inherited by the form control and form group classes,
we can accept either class by entertaining the argument with the abstract control class by accepting
the group.
We all have access to every control in the group.
The main goal of this function is to match the passwords.
Let's assign the controls to variables for readability.
First, we will create a variable for the password field called control.
The value for this variable will be the group Typekit password function.
The next variable will be called matching control.
Its value will be the group don't get confirmed.
Password function.
The get function will return the form controls from within a group before we start comparing their values.
We should check if a control can't be found.
Otherwise, we won't be able to compare their values after defining the variables and a conditional
statement to check if either variable is empty.
If they are, we are going to return an object with the error message found for the developer.
The object will contain a property called controlled not found with an initial value of false.
The error has nothing to do with the values themselves.
However, we should provide a helpful error for developers using our validator.
It's going to help them debug the validator.
We can begin comparing their values below.
These variables create a variable called error.
The value for this variable will be a ternary operator.
We will check if the control value property is strictly equal to matching control value property.
If these fields match, we can return null.
Otherwise, we can return an object with a property called no match with an initial value of true.
Lastly, we can return this variable.
Our validator is ready, we can apply it to our form.
Open the register component class file.
At the top of the file, we will import the register of Validators class.
Normally we would have to create a new instance out of this class.
Luckily, our match method is static.
We can pass this function on to the form group, search for the form group definition.
We are creating a new group with the Form Group class.
The first argument of the constructor function is a list of form controls.
There's a second optional argument.
It's an array of validators.
We want to apply to the whole group.
We will pass in an array with the register validators dot match function.
Angular will automatically invoke this function with the form group.
We don't have to do anything else on our end just to make sure we should log the errors open the register
template file.
Scroll to the bottom of that template.
We will add an expression to output the register form dot errors property with the JSON pipe.
In a future lecture, we will work on adequately handling errors from custom validators.
For now, this solution will work.
Refresh the form in the browser.
Type inside the password fields with non matching values.
At the bottom of the form, we're told the errors don't match.
Perfect.
We can adjust the values to make them match if they match, a no value is returned by our validator
function.
As you can see, validator functions are regular functions that accept a form group or control.
We can access their values to perform validation.
Creating validators is a simple process overall.
We're going to improve our current implementation by converting our validator function to a factory
function.
Let's discuss what factory functions are in the next lecture.