1
00:00:03,170 --> 00:00:05,820
Now that we have learnt about

2
00:00:05,820 --> 00:00:11,165
template-driven form validation support in Angular in the previous lecture,

3
00:00:11,165 --> 00:00:14,625
let's apply what we have learned to

4
00:00:14,625 --> 00:00:18,330
the login form that we have designed in the previous exercise.

5
00:00:18,330 --> 00:00:21,395
We will do simple form validation for the login form.

6
00:00:21,395 --> 00:00:26,160
In particular, we'll specify the username and password as required,

7
00:00:26,160 --> 00:00:32,430
and then check to ensure that the user types in information into these fields,

8
00:00:32,430 --> 00:00:37,125
and be able to display error messages when the fields are empty.

9
00:00:37,125 --> 00:00:46,180
Let's proceed ahead with this modification to the application in this exercise.

10
00:00:46,180 --> 00:00:49,215
To get started on this exercise,

11
00:00:49,215 --> 00:00:53,600
let's go to the login form here,

12
00:00:53,600 --> 00:00:57,090
that we have in the login components template here.

13
00:00:57,090 --> 00:01:02,400
We have already added in the novalidate attribute to the login form.

14
00:01:02,400 --> 00:01:10,780
So, let's add in the template variable called loginForm to this template,

15
00:01:10,780 --> 00:01:18,835
and then set this to ngForm as we understood from the previous lecture here.

16
00:01:18,835 --> 00:01:20,170
So, by doing this,

17
00:01:20,170 --> 00:01:26,500
we are specifying that this template variable enables us to track the state of the form.

18
00:01:26,500 --> 00:01:31,330
So, we can even check for the valid or invalid state for this form.

19
00:01:31,330 --> 00:01:34,485
Now, in addition, for each of these inputs,

20
00:01:34,485 --> 00:01:43,620
we will also similarly add in the corresponding template variables here.

21
00:01:43,620 --> 00:01:45,220
So, let me go to the next line here,

22
00:01:45,220 --> 00:01:52,670
and there I'll say username is ngModel.

23
00:01:52,670 --> 00:01:58,360
Then, we'll also specify this as required here.

24
00:01:58,360 --> 00:02:00,660
Similarly, for the password,

25
00:02:00,660 --> 00:02:09,545
we will add in the corresponding template variable here as password is in ngModel,

26
00:02:09,545 --> 00:02:15,700
and then specify this as required here.

27
00:02:15,700 --> 00:02:19,700
So, now that we have specified the template variables,

28
00:02:19,700 --> 00:02:23,870
we can then carry out some of the form validation checks here.

29
00:02:23,870 --> 00:02:26,490
Now, because we are specifying this as required,

30
00:02:26,490 --> 00:02:28,280
that means that if these fields,

31
00:02:28,280 --> 00:02:30,455
the input fields are empty,

32
00:02:30,455 --> 00:02:34,525
then the required error will be flagged for this.

33
00:02:34,525 --> 00:02:40,105
Similarly, now that we have the template variable for the form,

34
00:02:40,105 --> 00:02:47,380
we can easily use that to check and disable the Submit button down below here.

35
00:02:47,380 --> 00:02:49,255
So, for the Submit button,

36
00:02:49,255 --> 00:02:53,270
what we do here is to use

37
00:02:53,270 --> 00:03:01,080
the disabled field here,

38
00:03:01,080 --> 00:03:03,500
and then we'll set the disabled field

39
00:03:03,500 --> 00:03:12,270
to loginForm.form.invalid.

40
00:03:12,270 --> 00:03:14,030
So, by doing this,

41
00:03:14,030 --> 00:03:18,030
we will be disabling this button when the form is invalid.

42
00:03:18,030 --> 00:03:23,925
So, thereby, the user cannot even submit the form when the form contains invalid entry.

43
00:03:23,925 --> 00:03:27,355
So, for example, if the username is empty or the password is empty,

44
00:03:27,355 --> 00:03:29,520
then the login form will be invalid,

45
00:03:29,520 --> 00:03:32,290
and so the user cannot submit this form.

46
00:03:32,290 --> 00:03:36,950
Now, this is one part of form validation that we can do,

47
00:03:36,950 --> 00:03:40,385
whereby we can prevent the form from being submitted.

48
00:03:40,385 --> 00:03:43,285
In addition, for each of these fields,

49
00:03:43,285 --> 00:03:47,945
we can even display an error message to

50
00:03:47,945 --> 00:03:53,875
indicate what kind of error is occurring in this particular field.

51
00:03:53,875 --> 00:03:55,309
So, to do this,

52
00:03:55,309 --> 00:03:58,230
to each of these form field elements,

53
00:03:58,230 --> 00:04:07,650
we will add in the mat-error tag there,

54
00:04:07,650 --> 00:04:12,270
and then we'll say stop ngIf,

55
00:04:12,270 --> 00:04:18,345
and we'll say username.errors.

56
00:04:18,345 --> 00:04:23,920
So, notice that we have already given this template a variable called username,

57
00:04:23,920 --> 00:04:28,665
so that we can use in username.errors if there are errors and

58
00:04:28,665 --> 00:04:34,930
if this error type is required.

59
00:04:34,930 --> 00:04:41,810
So, if the error is a required type of error that is cause there,

60
00:04:41,810 --> 00:04:44,060
then at that point,

61
00:04:44,060 --> 00:04:54,140
we can specify that the corresponding error to be displayed is username is required.

62
00:04:54,140 --> 00:04:59,305
So, that is the error that is going to be displayed for this field here.

63
00:04:59,305 --> 00:05:03,810
Similarly, let me add the same kind of thing for the password field here.

64
00:05:03,810 --> 00:05:06,610
So, let me copy that and then paste it in here,

65
00:05:06,610 --> 00:05:09,110
and then we'll say password.errors.

66
00:05:09,110 --> 00:05:17,395
Then, the message will be password is required.

67
00:05:17,395 --> 00:05:19,070
So, by adding this,

68
00:05:19,070 --> 00:05:22,535
we will be displaying error messages down below

69
00:05:22,535 --> 00:05:27,665
these fields when the field doesn't contain any information.

70
00:05:27,665 --> 00:05:29,950
Minor correction here.

71
00:05:29,950 --> 00:05:34,820
That should be username?errors.required here,

72
00:05:34,820 --> 00:05:38,470
and similarly, this one also should be.required here.

73
00:05:38,470 --> 00:05:40,375
So, with these modifications,

74
00:05:40,375 --> 00:05:43,280
my login component is now ready

75
00:05:43,280 --> 00:05:47,275
to do the form validation and then display error messages.

76
00:05:47,275 --> 00:05:52,505
So, let's save the changes and then go and take a look at the updated application.

77
00:05:52,505 --> 00:05:55,705
Going to our application in the browser,

78
00:05:55,705 --> 00:05:58,475
let's open the login form here.

79
00:05:58,475 --> 00:06:01,720
So, you can see that now both the username and password carry

80
00:06:01,720 --> 00:06:05,355
a star there to indicate that they are both required.

81
00:06:05,355 --> 00:06:07,550
So, let me type in.

82
00:06:09,870 --> 00:06:16,130
So, here, you see that the form is valid because it contains information,

83
00:06:16,130 --> 00:06:20,375
and so the Login button will be enabled.

84
00:06:20,375 --> 00:06:24,840
Let me remove the information from the password field,

85
00:06:24,840 --> 00:06:27,950
and then you immediately notice that

86
00:06:27,950 --> 00:06:32,405
the error is indicated here saying password is required.

87
00:06:32,405 --> 00:06:37,040
Also note that the Login button will not be enabled anymore.

88
00:06:37,040 --> 00:06:40,760
It'll be disabled. So, you will not be able to submit the form here.

89
00:06:40,760 --> 00:06:43,960
But the moment I fill in something into the password,

90
00:06:43,960 --> 00:06:47,060
then the Login button will be enabled,

91
00:06:47,060 --> 00:06:49,670
and we will be able to submit the form here.

92
00:06:49,670 --> 00:06:51,390
Similarly for the user name.

93
00:06:51,390 --> 00:06:55,045
If I remove the username information there,

94
00:06:55,045 --> 00:06:58,115
then you'll see the error being displayed here,

95
00:06:58,115 --> 00:07:04,670
and also you will see that the Login button is not enabled at this point.

96
00:07:04,670 --> 00:07:10,270
So, that's how the form validation can be carried out in this case.

97
00:07:10,270 --> 00:07:12,170
So, as you have seen,

98
00:07:12,170 --> 00:07:15,960
by adding in simple form validation to our application,

99
00:07:15,960 --> 00:07:18,515
we can check to ensure that

100
00:07:18,515 --> 00:07:22,925
the fields contain the information that they are suppose to contain,

101
00:07:22,925 --> 00:07:24,725
and in the right format.

102
00:07:24,725 --> 00:07:30,290
We will examine a little more of what form validation in one of the later exercises,

103
00:07:30,290 --> 00:07:33,020
especially for reactive forms.

104
00:07:33,020 --> 00:07:35,945
With this, we complete this exercise.

105
00:07:35,945 --> 00:07:38,840
This is a good time for you to do a git commit

106
00:07:38,840 --> 00:07:43,080
with the message template-driven forms, part two.