In this lecture, we were going to validate the next field in our form, in the register template file
the field after the email is the age field unlike before.
We aren't going to be dealing with a string.
We will need to validate a number.
It's going to require a different set of validators.
Let's get started.
Open the register a component in your editor.
Search for the input for the age, it can be found directly below the email field.
First things first, we will replace the input element with the input component.
The control property should be bound to its respective control.
We will bind it to the age property.
The tight property will be set to no.
The number type is a special type by the browser.
It'll prevent the user from typing alphabetic or special characters, the input will be restricted to
numbers that makes our lives incredibly easier.
Next, we will add the placeholder property.
It'll be set to the following message Enter age.
We're finished with the template.
Let's begin adding validators open the register component class file.
Search for the age property, an array of validators will be passed as the second argument to the new
instance of the form control class.
We will start by adding the required validator function.
The age should be required before signing up.
Next, we will add a validator called minimum.
The minimum validator function is completely different from the minimum length validator function.
This validator function will validate numbers.
It doesn't check the character length.
We need to work with raw numbers if we want to set a minimum threshold.
This validator will help us.
It has one argument, which is a number we will pass in.
18.
We don't want users under the age of 18 signing up next.
Let's set a maximum threshold.
We don't want users over the age of 120.
We can add a maximum threshold by adding the maximum validator function.
We will pass in 120.
Most people aren't over the age of 120.
Feel free to adjust this value to whatever you like.
Realistically, it doesn't matter if users are older than 120.
However, we will have this validator to control, for example, purposes.
The last step in this process is to handle rendering error messages before we do.
It's always a good idea to check the value returned by the validator functions when an error occurs.
In the resource section of this lecture, I provide a link to the Minimum Validator Function Documentation
page.
According to the documentation page, the error will be an object with a property called minimum.
It'll have two properties.
The current number and the required minimum value.
Let's move on to the maximum validator function.
It's directly under this function.
The documentation tells us the error will be an object.
It'll have similar properties to the minimum object.
For example, it'll tell us the current value and required maximum value.
Now that we have an idea of what to expect, let's begin handling the error.
Go back to the editor.
We are going to be working inside the input template file.
At the bottom of the energy container element, we will add a paragraph element with the class of text
read four hundred.
Inside this element, we will add the following message value to low.
Next, we will add the NGF directive to check if we should render this message, the condition will
be the following.
Control errors question mark.
Dot min.
We're almost finished.
We need to handle the error from the maximum validator function.
The message will be similar to the minimum error.
Let's make a copy of this paragraph element.
The condition will check for the Max property inside of the main property.
Lastly, the message will say the following value to high.
That should do it.
Let's test the age field in the browser.
If we Typekit number below 18, an error will pop up.
It's telling us the number is too low.
Vice versa, if type of number above 120.
The error message will tell us the number is too high.
If we type anything in between these two thresholds, the field is valid.
Perfect.
We've successfully validated the age we learned about two validator functions for testing numbers instead
of a character length of a string.
These functions may look the same, but serve different purposes.
It's always good to read the documentation to verify how the validator functions work in the next lecture.
We will start validating the password fields.