1
00:00:00,120 --> 00:00:04,890
In this lecture, we are going to handle the error messages for the email field.

2
00:00:05,250 --> 00:00:10,140
The process is going to be simpler than the error handling for our reactive forms.

3
00:00:10,470 --> 00:00:16,079
Instead of creating a separate component, we will keep everything inside the log in component.

4
00:00:16,410 --> 00:00:21,240
We don't want to spend so much time on template forms, since they're simpler overall.

5
00:00:21,810 --> 00:00:23,940
Open the log in template file.

6
00:00:26,530 --> 00:00:30,820
The first step for handling errors is to access the controls errors.

7
00:00:31,090 --> 00:00:34,570
We can do so through the log and form template variable.

8
00:00:34,870 --> 00:00:41,110
However, I think there's a better way instead of accessing the controls through the login form template

9
00:00:41,110 --> 00:00:41,800
variable.

10
00:00:42,070 --> 00:00:45,550
Let's add a template variable to the input elements.

11
00:00:45,850 --> 00:00:49,750
We can access the controls directly through template variables.

12
00:00:50,080 --> 00:00:55,270
It's going to result in less code on the input element for the email.

13
00:00:55,360 --> 00:00:58,510
We will add a template variable called email.

14
00:01:01,130 --> 00:01:05,300
We will set the email variable to the Energy Model Directive.

15
00:01:07,870 --> 00:01:13,960
The new model, DirecTV, is responsible for creating an instance of the form control object.

16
00:01:14,320 --> 00:01:20,620
Therefore, if we want to access the form control, we must set our variable to this directive.

17
00:01:20,950 --> 00:01:24,940
We can start to work on the error below the input element.

18
00:01:25,120 --> 00:01:30,010
We will add a paragraph element with the text read 400 class.

19
00:01:32,500 --> 00:01:36,070
Inside this element, we will render the following message.

20
00:01:36,340 --> 00:01:37,750
Email is invalid.

21
00:01:40,320 --> 00:01:43,590
Once again, we're going to keep our air handling simple.

22
00:01:43,770 --> 00:01:49,410
We aren't going to render a dozen different messages like last time before we ran into the message.

23
00:01:49,500 --> 00:01:52,140
We should check if the control has been touched.

24
00:01:52,500 --> 00:01:55,380
Angular will run validation immediately.

25
00:01:55,710 --> 00:02:01,590
We don't want to annoy the user with an error message when they haven't had the chance to input a value

26
00:02:02,220 --> 00:02:06,570
on the paragraph element, add an NGF directive.

27
00:02:06,930 --> 00:02:14,640
The condition will be the following email errors and email touch and email dot dirty.

28
00:02:17,240 --> 00:02:20,150
In total, we are checking for three properties.

29
00:02:20,480 --> 00:02:22,790
First, we're checking if there are errors.

30
00:02:23,120 --> 00:02:30,020
If the validation fails on the input, the errors property will contain the error related to the validator

31
00:02:30,020 --> 00:02:31,280
function that failed.

32
00:02:31,610 --> 00:02:34,430
It'll be set to know if the input is valid.

33
00:02:34,760 --> 00:02:37,820
Second, we're checking if the field has been touched.

34
00:02:38,120 --> 00:02:41,660
Lastly, we're checking if the value has changed.

35
00:02:42,170 --> 00:02:46,700
One last thing we should remove the expression at the bottom of the template.

36
00:02:47,030 --> 00:02:51,350
We added this expression to help us check the validation of our form.

37
00:02:51,710 --> 00:02:57,380
Now that we're adding error messages, it's safe to remove the expression along with the surrounding

38
00:02:57,380 --> 00:02:58,280
div elements.

39
00:03:00,820 --> 00:03:02,920
Let's test the forum in the browser.

40
00:03:05,350 --> 00:03:10,300
Initially, the air is hidden, even though the e-mail field is invalid.

41
00:03:10,450 --> 00:03:14,320
We've hidden the air until the field has been touched and modified.

42
00:03:14,740 --> 00:03:17,620
Let's try entering an invalid email.

43
00:03:20,380 --> 00:03:21,730
The error should appear.

44
00:03:22,000 --> 00:03:24,250
It's telling us the email is invalid.

45
00:03:24,580 --> 00:03:26,410
Let's try a valid email.

46
00:03:28,640 --> 00:03:30,760
The error has gone away great.

47
00:03:31,040 --> 00:03:33,830
We've successfully rendered an error message.

48
00:03:34,070 --> 00:03:37,430
We're finished with the email field in the next lecture.

49
00:03:37,460 --> 00:03:40,280
We're going to start working on the password field.