1
00:00:04,070 --> 00:00:10,290
We have just completed learning about Angular template-driven forms and also,

2
00:00:10,290 --> 00:00:14,300
in the exercise, constructed our first template-driven form.

3
00:00:14,300 --> 00:00:18,210
Now, when the user types in information into the form fields,

4
00:00:18,210 --> 00:00:23,655
we may wish to validate the data that the user types into those data fields.

5
00:00:23,655 --> 00:00:25,630
In the early days of the web,

6
00:00:25,630 --> 00:00:28,950
the only way of checking the data was to ship the data

7
00:00:28,950 --> 00:00:32,580
over to the server and then do the checks on the server side,

8
00:00:32,580 --> 00:00:37,155
and then get the result from the server side.

9
00:00:37,155 --> 00:00:41,935
But these days, with powerful client-side frameworks like Angular,

10
00:00:41,935 --> 00:00:46,580
a lot of the data validation can easily be carried out on the client side

11
00:00:46,580 --> 00:00:52,070
itself and we can easily catch a lot of the errors on the client side,

12
00:00:52,070 --> 00:00:56,885
and then even provide indication to the user about the errors.

13
00:00:56,885 --> 00:01:00,170
Now, this is where we'll look at Angular support for

14
00:01:00,170 --> 00:01:03,725
form validation and then how we can carry out form validation,

15
00:01:03,725 --> 00:01:11,170
and then show error messages to the user in the views.

16
00:01:11,260 --> 00:01:17,455
HTML5 already comes with some built-in support for form validation.

17
00:01:17,455 --> 00:01:20,750
But when we are using Angular for our application,

18
00:01:20,750 --> 00:01:23,840
we have to first turn off the HTML5 form validation,

19
00:01:23,840 --> 00:01:25,640
so that the responsibility of doing

20
00:01:25,640 --> 00:01:29,750
form validation is transferred over to the Angular application.

21
00:01:29,750 --> 00:01:32,240
So, to do that for the form,

22
00:01:32,240 --> 00:01:34,525
as we have seen in the exercise earlier,

23
00:01:34,525 --> 00:01:40,760
we include the novalidate attribute to the form tag there,

24
00:01:40,760 --> 00:01:43,910
so that this ensures that the angular

25
00:01:43,910 --> 00:01:47,585
takes over the responsibility of doing form validation.

26
00:01:47,585 --> 00:01:50,645
How does Angular help us to do form validation?

27
00:01:50,645 --> 00:01:55,324
That is what we will examine in more detail next.

28
00:01:55,324 --> 00:01:59,600
Whenever you need to do form validation in Angular,

29
00:01:59,600 --> 00:02:05,570
especially when you need to reference to the form fields within your template,

30
00:02:05,570 --> 00:02:09,960
then you need the help of Angular template reference variables.

31
00:02:09,960 --> 00:02:12,725
How do we specify a template reference variable?

32
00:02:12,725 --> 00:02:15,485
The template reference variable can be specified for

33
00:02:15,485 --> 00:02:19,235
any element by associating a template variable like this.

34
00:02:19,235 --> 00:02:22,880
For example, in this case for form,

35
00:02:22,880 --> 00:02:29,760
we are specifying the login form equal to ngForm.

36
00:02:29,760 --> 00:02:33,160
Similarly, for an input field for example,

37
00:02:33,160 --> 00:02:35,050
you would say slash,

38
00:02:35,050 --> 00:02:39,725
or rather #username is equal to ngModel.

39
00:02:39,725 --> 00:02:46,130
In this case, the login form and the user name are all template reference variables.

40
00:02:46,130 --> 00:02:49,370
These template reference variables can then be used within

41
00:02:49,370 --> 00:02:53,800
our Angular template to reference to these fields.

42
00:02:53,800 --> 00:02:56,245
So, in the template itself,

43
00:02:56,245 --> 00:02:59,060
you can check the control states for

44
00:02:59,060 --> 00:03:03,289
those fields including things like whether the field is valid,

45
00:03:03,289 --> 00:03:04,760
whether it is dirty,

46
00:03:04,760 --> 00:03:06,430
or it has some errors.

47
00:03:06,430 --> 00:03:12,865
We will leverage this support that Angular provides in order to do form validation.

48
00:03:12,865 --> 00:03:15,964
As I mentioned, we will be leveraging

49
00:03:15,964 --> 00:03:21,870
the template reference variables to gather the control state to check for information.

50
00:03:21,870 --> 00:03:27,370
So, for example, you can say username.pristine within your template.

51
00:03:27,370 --> 00:03:30,440
So, that refers to checking for the state,

52
00:03:30,440 --> 00:03:33,960
whether the particular control is in the pristine state,

53
00:03:33,960 --> 00:03:39,080
meaning that it has not been touched and modified by the user so far.

54
00:03:39,080 --> 00:03:41,840
The dirty is opposite of pristine,

55
00:03:41,840 --> 00:03:45,050
which means that when a field is dirty,

56
00:03:45,050 --> 00:03:49,105
then that means that the field has been modified by the user in the past.

57
00:03:49,105 --> 00:03:53,090
Similarly, the valid and invalid control state

58
00:03:53,090 --> 00:03:58,295
enables us to check whether the information within that field is valid or not valid,

59
00:03:58,295 --> 00:04:02,360
depending on the specification of your check

60
00:04:02,360 --> 00:04:06,530
for the validity or the invalid state of that particular field.

61
00:04:06,530 --> 00:04:11,990
So, for example, you can check if you declared a field as required,

62
00:04:11,990 --> 00:04:14,930
that means that you expected the user

63
00:04:14,930 --> 00:04:18,790
to type in at least some information into the field.

64
00:04:18,790 --> 00:04:24,280
The absence of information within the field in your form means that the field is invalid.

65
00:04:24,280 --> 00:04:28,670
Similarly, you can specify the mainland or the max length of a field value,

66
00:04:28,670 --> 00:04:31,970
so that you can easily check whether the number of characters

67
00:04:31,970 --> 00:04:35,500
within a field is about the main length,

68
00:04:35,500 --> 00:04:37,660
or below the max length, and so on.

69
00:04:37,660 --> 00:04:39,380
In the exercise that follows,

70
00:04:39,380 --> 00:04:42,740
we will apply these various form validation approaches for

71
00:04:42,740 --> 00:04:47,080
our template-driven form that we have designed in the previous exercise.

72
00:04:47,080 --> 00:04:51,564
As an example, in your form,

73
00:04:51,564 --> 00:04:54,170
you can disable the submit button by checking to

74
00:04:54,170 --> 00:04:56,770
see if that form is in the valid state or not.

75
00:04:56,770 --> 00:05:00,650
So in this case, you will associate the disabled

76
00:05:00,650 --> 00:05:05,875
and set it equal to the login form.form.invalid,

77
00:05:05,875 --> 00:05:07,970
means that when the form is invalid,

78
00:05:07,970 --> 00:05:10,480
this button will be disabled in this case.

79
00:05:10,480 --> 00:05:15,910
So, the user will not be allowed to submit the information through this particular form.

80
00:05:15,910 --> 00:05:18,995
So, this is one way of ensure that

81
00:05:18,995 --> 00:05:22,700
incorrect entries will not be submitted by the user through the form.

82
00:05:22,700 --> 00:05:25,100
Similarly, for specific fields,

83
00:05:25,100 --> 00:05:30,080
you can check to see whether the field has been filled or not.

84
00:05:30,080 --> 00:05:33,125
So, if you specify that a particular field is required

85
00:05:33,125 --> 00:05:36,620
by specifying the required attribute for the input field,

86
00:05:36,620 --> 00:05:39,320
then you can check to see whether there is an error of

87
00:05:39,320 --> 00:05:43,250
the required type raised for the particular field element there.

88
00:05:43,250 --> 00:05:45,020
So, in your code for example,

89
00:05:45,020 --> 00:05:47,390
you can even specify to inform the user about

90
00:05:47,390 --> 00:05:51,035
the fact that a particular field is incorrect.

91
00:05:51,035 --> 00:05:56,885
You use the mat-error to signify that.

92
00:05:56,885 --> 00:06:01,230
So, the mat-error tag, which comes from,

93
00:06:01,230 --> 00:06:06,555
again, the Angular material form support as you see here,

94
00:06:06,555 --> 00:06:09,195
if the ngIf turns out to be true,

95
00:06:09,195 --> 00:06:15,560
then that message will be displayed below in the input field there,

96
00:06:15,560 --> 00:06:17,100
and similar to the input field,

97
00:06:17,100 --> 00:06:20,405
will be marked as red in the screen.

98
00:06:20,405 --> 00:06:25,085
So, this is something that you're going to be checking and

99
00:06:25,085 --> 00:06:30,000
ensuring and also delivering error messages to the user.

100
00:06:30,000 --> 00:06:31,740
In the exercise that follows,

101
00:06:31,740 --> 00:06:35,980
we will apply this approach to check the username and the password.

102
00:06:35,980 --> 00:06:40,700
We'll specify that these fields are required and if the user does

103
00:06:40,700 --> 00:06:45,565
not type in any information into these fields after the field has been touched,

104
00:06:45,565 --> 00:06:51,210
then we will ensure that the appropriate error message is displayed to the user.

105
00:06:51,210 --> 00:06:57,469
So, with this quick understanding of form validation in Angular,

106
00:06:57,469 --> 00:06:58,970
let's move on to the exercise,

107
00:06:58,970 --> 00:07:03,410
where we will check out how we can do simple form validation for

108
00:07:03,410 --> 00:07:08,160
our login form and then be able to display error messages.

109
00:07:08,160 --> 00:07:12,470
We'll again come back to form validation in one of the later exercises,

110
00:07:12,470 --> 00:07:19,660
after we have learned more about reactive support in Angular.