1
00:00:00,000 --> 00:00:04,790
[MUSIC]

2
00:00:04,790 --> 00:00:08,789
Where there is a formed there
is validation right behind it.

3
00:00:08,789 --> 00:00:14,914
So what does angular support for
doing reactive for validation?

4
00:00:14,914 --> 00:00:17,950
That's what we will talk
about in this lecture.

5
00:00:19,738 --> 00:00:28,107
Angular provides a set of validators that
are included along with reactive module.

6
00:00:28,107 --> 00:00:33,138
We have already seen in t
earlier exercise included

7
00:00:33,138 --> 00:00:39,390
the validators into our
contact component.tc file.

8
00:00:39,390 --> 00:00:42,530
How do we make use of that
within our application?

9
00:00:42,530 --> 00:00:48,450
So, let's take a look at how we can do
form validation within our application.

10
00:00:48,450 --> 00:00:52,810
To use the built and
validators that angular supports for

11
00:00:52,810 --> 00:00:58,590
reactive forms, they include
the validators into our component file.

12
00:00:58,590 --> 00:01:03,330
And then after that we,
if we are using the Form Builder

13
00:01:03,330 --> 00:01:07,220
then we can apply the validators,
as shown in this example.

14
00:01:07,220 --> 00:01:12,730
So for each of the properties that you
define, you can also define the value for

15
00:01:12,730 --> 00:01:20,020
the property as an array containing
the initial value + a set of validators.

16
00:01:20,020 --> 00:01:24,140
So in this case I have applied
the validators required for

17
00:01:24,140 --> 00:01:26,960
all these different elements here.

18
00:01:26,960 --> 00:01:29,634
You can apply more than one validator.

19
00:01:29,634 --> 00:01:33,600
You can declare them as
part of this array here.

20
00:01:33,600 --> 00:01:39,210
So here in this example, you see me
applying the validators required.

21
00:01:39,210 --> 00:01:42,390
Similarly, there is a validator's
min length, max length,

22
00:01:42,390 --> 00:01:46,300
and others a total available in angular.

23
00:01:46,300 --> 00:01:51,160
Once you apply the validators then
how do we inspect the thumb control

24
00:01:51,160 --> 00:01:55,470
properties in order to discover
if there are errors and

25
00:01:55,470 --> 00:02:01,800
to raise appropriate feedback to
the user to tell them about the errors?

26
00:02:01,800 --> 00:02:04,660
So you can inspect any value

27
00:02:04,660 --> 00:02:08,620
within a form control by looking
at its property as follows.

28
00:02:08,620 --> 00:02:16,120
So for example if you have to examine
the status of the first name form control,

29
00:02:16,120 --> 00:02:24,232
then you can say feedbackForm.get that
encodes firstname.status or you can say,

30
00:02:24,232 --> 00:02:30,870
feedbackForm.get telnum.hasError and
then say it required.

31
00:02:30,870 --> 00:02:33,830
So all of these will be either be true or
false.

32
00:02:33,830 --> 00:02:36,560
Depending upon their current states.

33
00:02:36,560 --> 00:02:42,230
So by using .value you get the value
of the form controller itself.

34
00:02:42,230 --> 00:02:46,257
So you can say
feedbackForm.get('firstname').value.

35
00:02:46,257 --> 00:02:51,418
And that'll return the current value
that is entered into that form control.

36
00:02:51,418 --> 00:02:54,790
That status just gives you
the validity of the form control.

37
00:02:54,790 --> 00:02:59,140
It could be either valid or
invalid pending or disabled.

38
00:03:00,150 --> 00:03:02,510
Similarly, you can check for
the pristine value.

39
00:03:02,510 --> 00:03:04,530
You can either check for pristine or

40
00:03:04,530 --> 00:03:09,700
dirty, just like we used pristine and
dirty in the previous template forms.

41
00:03:09,700 --> 00:03:14,370
Similar to that, you can check
pristine and dirty to check if it is

42
00:03:14,370 --> 00:03:18,689
true then form control is
either .pristine or .dirty.

43
00:03:18,689 --> 00:03:21,690
And similarly, .untouched and .touched.

44
00:03:21,690 --> 00:03:26,950
The untouched and touched will
be true if the user has not yet

45
00:03:26,950 --> 00:03:33,815
entered a HTML value into the HTML
control and trigger its blur event.

46
00:03:33,815 --> 00:03:39,491
So which means that you have entered the
value, and then leave that in order for

47
00:03:39,491 --> 00:03:43,197
the untouched or
touched to be set to true or false.

48
00:03:43,197 --> 00:03:48,187
We will see the use of these in
the exercise that follows where we

49
00:03:48,187 --> 00:03:52,992
will use these validators and
also inspect the form controls

50
00:03:52,992 --> 00:03:57,721
in order to decide whether there
are errors in our thought.

51
00:03:57,721 --> 00:04:03,459
[MUSIC]