[MUSIC]
Now that we have had a quick introduction to reactive form validation in
the previous lecture, let's proceed to the next exercise where we could
apply form validation to the reactive form that we created in the previous exercise.
So going to our contact component typescript file,
let's add in the form validators to each of these properties within our form model.
So for the first name I would say within the array, Validators.
Required, Similarly I will
apply the same to the, lastname.
Then email, and also for the telnum, so for
the telnum I would say for the remaining three I can leave them open,
because I agree with either be false or true and give them other values.
Because it's a slight toggle and contacttype can take only one
of the three values and Default value's already given there,
and for message, we can make it not a required value.
If the user doesn't want to type in comments,
you can allow them to not type in comments, but if you want to,
you can add the Validators.required even for message.
In addition, when you reset the form in the onSubmit method here
you can also reset the form to its initial value as we specified
in the method where we created the form.
So within the reset value, it takes an object as a parameter here.
This object will be used by the reset method by making
use of the set value method that we saw in the lecture earlier to reset
the form to the condition as it was when it is originally created.
So, here we can supply
parameters like firstname: ' ',
lastname: ' ', telnum: 0,
Then email: ' ',
agree: false,
contacttype: 'None',
message: ' '});.
So these values that we supplied in this
JavaScript object that we give us the parameter to the reset
method will have exactly the same values as we saw for
these properties when we created that feedback form.
We also need to reset the form completely in the template.
So to do that, to go back to the import up here, and
then we'll also import the ViewChild } from '@angular/core';.
This will enable us to get access to
any of the child dom elements within my template.
So after doing this, coming into the code,
here in the ContactComponent, I can say @ViewChild,
and then I will be able to refer to the feedbackForm by
giving it a template variable with the name fform.
You're going to do that in the next step, and then so for this,
I will refer to this by using feedbackFormDirective.
So this enables us to get access to the template form and then completely reset
it, so that the form itself is reset back to its pristine value.
So this is another additional step that we need to do to ensure that the form is
completely reset to its initial value here.
Now having done that in the onSubject method, after we reset the feedbackForm
Object itself here, we also need to add
in this.feedbackFormDirective.resetForm();
In there.
So this will ensure that my feedbackForm is completely reset to its
pristine value at this point.
So after these changes let's now go to our template
file to show how we can reflect these
errors into our template for our form there.
So, switching to the template file.
So first one, we will go to the button here, and
then we will make the button Disabled.
If the "feedbackForm is invalid".
So the button will be enabled only when the feedbackForm is valid.
Moving to that form let me add in
the <mat-error *ngIF="feedbackForm.get" get
('firstname').hasError('required')
&&
feedbackForm.get('firstname')
.touched", and the message is First name is required.
So that would be the message you assign using one single line with the hidden,
with this information there.
Let me apply the same thing to the lastname,
Telephone number, and the email.
So I'm just going to copy, and paste, and edit them,
so you can proceed ahead with those, and ('lastname').
Last name.
Telnum.
So I apply that to ('telnum').
Again, the same idea behind that and then also to email.
('email').
Let's add in the template variable called fform to the form.
So I type #fform="ngForm".
Going to our form in the browser, let me type in the first name,
and you see that even if I delete the value will still remain green,
because we used the touched there.
But the moment I move away from it then you
will be able to see that that becomes a red color.
So similarly for the Last Name you will see that when I
remove the Last Name value, then that is shown there similarly.
Let me type in the first name and the last name, and for the email also.
The, Same case for the telephone number also.
So like this, you can do form validation in our application.
With this, we complete this exercise where we have
added in form validation to our reactive form.
This is a good time for you to do a git commit with the message,
reactive forms part two.
[MUSIC]