[MUSIC]
Where there is a formed there is validation right behind it.
So what does angular support for doing reactive for validation?
That's what we will talk about in this lecture.
Angular provides a set of validators that are included along with reactive module.
We have already seen in t earlier exercise included
the validators into our contact component.tc file.
How do we make use of that within our application?
So, let's take a look at how we can do form validation within our application.
To use the built and validators that angular supports for
reactive forms, they include the validators into our component file.
And then after that we, if we are using the Form Builder
then we can apply the validators, as shown in this example.
So for each of the properties that you define, you can also define the value for
the property as an array containing the initial value + a set of validators.
So in this case I have applied the validators required for
all these different elements here.
You can apply more than one validator.
You can declare them as part of this array here.
So here in this example, you see me applying the validators required.
Similarly, there is a validator's min length, max length,
and others a total available in angular.
Once you apply the validators then how do we inspect the thumb control
properties in order to discover if there are errors and
to raise appropriate feedback to the user to tell them about the errors?
So you can inspect any value
within a form control by looking at its property as follows.
So for example if you have to examine the status of the first name form control,
then you can say feedbackForm.get that encodes firstname.status or you can say,
feedbackForm.get telnum.hasError and then say it required.
So all of these will be either be true or false.
Depending upon their current states.
So by using .value you get the value of the form controller itself.
So you can say feedbackForm.get('firstname').value.
And that'll return the current value that is entered into that form control.
That status just gives you the validity of the form control.
It could be either valid or invalid pending or disabled.
Similarly, you can check for the pristine value.
You can either check for pristine or
dirty, just like we used pristine and dirty in the previous template forms.
Similar to that, you can check pristine and dirty to check if it is
true then form control is either .pristine or .dirty.
And similarly, .untouched and .touched.
The untouched and touched will be true if the user has not yet
entered a HTML value into the HTML control and trigger its blur event.
So which means that you have entered the value, and then leave that in order for
the untouched or touched to be set to true or false.
We will see the use of these in the exercise that follows where we
will use these validators and also inspect the form controls
in order to decide whether there are errors in our thought.
[MUSIC]