In this lecture, we were going to move on from the name field.
It's time to start validating the other fields.
This will lead us to learning about the other validator functions from angular.
We will even create some along the way to get started.
Open the register template file.
After the name field, we have a field for the email.
There are some special properties attached to the input element.
Let's compare it to the input element from the input component.
I'll open both template side by side.
The classes are the same, and both elements where they differ are the type and placeholder attributes.
The type for the email field is set to email in the input component template.
The input element has a type of text.
The placeholder attributes are different, too.
We should make it possible to configure both attributes.
I think this would be a good idea to add more inputs.
These inputs should be optional.
If the user doesn't supply a type will assume the type should be set to text.
As for the placeholder, we'll initialize the input with an empty string.
Placeholders will be optional.
Open the input component class file.
Inside the class, we will add a property called type, the type for this property will be string with
a default value of text.
The type attribute should have a default value if the parent component doesn't provide one by default,
we will assume the input should be set to text.
Next, we will add another property called placeholder.
The type will be the same, but the default value will be an empty string.
After adding these properties, we should find them in the template switch over to the input template
file on the input element.
We will bind the tape and placeholder attributes to their respective properties in the component.
Both inputs will be optional, however, the purpose of adding these inputs was for the email field.
Let's update the template in the register template to add values for these inputs.
Scroll to the app input element for the name field.
We aren't going to add the type property since it's the default type.
However, we will add the placeholder property.
The value will be the following Enter your name.
Great.
Let's load this component for the email field below this input, we will immediately find the email
field.
We can replace the input element with the app input element.
The component is going to need the form control from the component.
Let's bind the control property to email.
The other properties don't need to be bound, the type property will be set to email.
Lastly, the placeholder property will be set to the following message enter email.
So far, so good.
The only thing left is to validate the email.
Open the register component class file.
We are going to update the e-mail property, which contains an instance of the form control object,
we can pass in an array to the constructor function.
It's an array of validator functions.
We will add two validator functions called required and email.
We're already familiar with the required validator function.
The email validator function is new to us in the resource section of this lecture, I provide a link
to the documentation section for the email validator function.
The documentation will give us all the information we'll need, the description tells us the requirements
for satisfying the validator.
The most important part of this section is the return value of the validator function.
This information can be found under the usage section, according to the documentation.
This function will return an object with a property called email.
Its value will be true if the validation fails by consulting the documentation.
We can skip outputting the error object to verify its properties and either gives us all the info will
need for handling errors from its validator functions.
Let's go back to our editors.
We all need to handle the validation errors.
Back in the input template file, we can skip adding a message for the required validation.
Luckily for us, we've added a message in our previous lecture.
That's the benefit of being able to reuse components.
We can move straight along to handling the error for the email.
Below the paragraph elements, we will add another paragraph element with a class of text read for hundred.
The message will be the following you must enter a valid email.
Lastly, we will add an energy if directive, the condition will be the following.
Control Act airs question mark.
Dot email.
We're finished.
Let's test the email input in the browser.
Inside the field for the email, we will type in a single character and move away, an error message
will tell us we must enter a valid email.
I will attempt to type a valid email.
Perfect.
The air has gone away.
We've successfully validated the email.
We aren't adding rules for a minimum and maximum character length.
The documentation says the email will have character limits imposed on the value that saves us a lot
of time in the next lecture.
We will begin validating the other fields.