1
00:00:00,150 --> 00:00:05,490
In this lecture, we are going to handle the errors generated by our custom validator.

2
00:00:05,790 --> 00:00:12,060
Unfortunately, there's a bit of a problem with how we've implemented the validator to understand why.

3
00:00:12,090 --> 00:00:14,430
Let's check out our form in the browser.

4
00:00:14,760 --> 00:00:18,210
I'm going to type a value inside the password field.

5
00:00:20,720 --> 00:00:25,370
This value will immediately trigger an error from our custom validator.

6
00:00:25,730 --> 00:00:28,160
The error gets logged below the form.

7
00:00:28,490 --> 00:00:30,890
The error is added to the form group.

8
00:00:31,220 --> 00:00:34,460
It's not added to a control, which can be a problem.

9
00:00:34,790 --> 00:00:39,410
The goal is to render an error message below the confirmed password field.

10
00:00:39,680 --> 00:00:44,060
However, the confirmed password field is not informed of the error.

11
00:00:44,690 --> 00:00:48,230
We can use the developer tools to verify this behavior.

12
00:00:48,590 --> 00:00:51,020
Open the angular developer tools.

13
00:00:53,460 --> 00:00:57,000
Under the register component, select the form element.

14
00:00:59,510 --> 00:01:06,740
We are going to be digging deep inside this elements, properties open the form controls, reconfirm

15
00:01:06,740 --> 00:01:09,110
password Dot Ayres object.

16
00:01:11,540 --> 00:01:15,140
It can change in air, but not from our custom validator.

17
00:01:15,470 --> 00:01:17,480
It says the value is required.

18
00:01:17,780 --> 00:01:21,620
I'll type in a value inside the confirm password field.

19
00:01:24,120 --> 00:01:27,960
After doing so, the error property is set to null.

20
00:01:28,320 --> 00:01:31,290
It's not aware that the password fields don't match.

21
00:01:31,560 --> 00:01:35,190
We need to inform the control of an error from the form group.

22
00:01:35,490 --> 00:01:39,690
Otherwise, we will not be able to render an error below the input.

23
00:01:40,170 --> 00:01:44,130
Alternatively, we could render the error in the alert component.

24
00:01:44,460 --> 00:01:45,670
That would be easier.

25
00:01:45,750 --> 00:01:47,880
But in my opinion, less effective.

26
00:01:48,360 --> 00:01:53,100
Fortunately, angular makes it super easy to add errors to controls.

27
00:01:53,340 --> 00:01:54,450
Let's get started.

28
00:01:54,750 --> 00:01:57,450
Open the register validators file.

29
00:02:00,020 --> 00:02:02,930
Angular manages errors on our behalf.

30
00:02:03,230 --> 00:02:10,430
It'll update the errors property on a group or control based on the value returned by a validator function.

31
00:02:10,789 --> 00:02:14,440
In some cases, we may want to manually add an error.

32
00:02:14,840 --> 00:02:22,160
Every control and group has a function for manually adding errors below the error variable in our function.

33
00:02:22,370 --> 00:02:27,050
We will call the set errors function on the matching control object.

34
00:02:29,650 --> 00:02:34,990
The set airs function has one argument, which is the air to add a control.

35
00:02:35,440 --> 00:02:39,040
Optionally, we can pass in no to remove errors.

36
00:02:39,280 --> 00:02:41,680
Let's pass in our errors variable.

37
00:02:44,260 --> 00:02:48,370
With one simple function, we've added an error to our control.

38
00:02:48,760 --> 00:02:54,910
There's one important point I want to make by using the set errors function, we're responsible for

39
00:02:54,910 --> 00:02:56,110
managing errors.

40
00:02:56,590 --> 00:02:58,540
Angular will not remove the error.

41
00:02:58,570 --> 00:03:04,150
If we manually add an error, we should remember to remove an error when a field is valid.

42
00:03:04,810 --> 00:03:09,100
The errors variable will either store an error object or null.

43
00:03:09,490 --> 00:03:15,610
Since our custom validator function will run on every key press, we will constantly be updating the

44
00:03:15,610 --> 00:03:16,240
control.

45
00:03:16,630 --> 00:03:22,090
Even though we're setting the error on the control, we are going to continue to return the error.

46
00:03:22,750 --> 00:03:28,960
If another developer wants to handle the error on the group, they will have that option before moving

47
00:03:28,960 --> 00:03:31,000
on to rendering error messages.

48
00:03:31,150 --> 00:03:35,650
Let's handle the other error in our validator above the variables.

49
00:03:35,830 --> 00:03:38,020
We are adding a conditional statement.

50
00:03:38,380 --> 00:03:42,280
These conditions will check if the controls were found in the group.

51
00:03:42,640 --> 00:03:46,720
If either of the controls can't be found, we will return in error.

52
00:03:47,290 --> 00:03:50,710
This type of error is for developers, not users.

53
00:03:51,010 --> 00:03:57,700
We should output an error message in the console to inform developers of the error above the return

54
00:03:57,700 --> 00:03:58,300
statement.

55
00:03:58,510 --> 00:04:05,380
We will call the console Typekit error function to output the following message Form controls cannot

56
00:04:05,380 --> 00:04:07,060
be found in the form group.

57
00:04:09,630 --> 00:04:15,360
We will leave the return statement inside the conditional block for the same reason as before.

58
00:04:15,750 --> 00:04:20,700
If developers want to handle the air in the templates, they will have that option.

59
00:04:21,089 --> 00:04:24,780
Let's move on to adding an error message for this validator.

60
00:04:25,080 --> 00:04:27,330
Open the input template file.

61
00:04:29,880 --> 00:04:33,660
We created this component to handle errors for input.

62
00:04:33,930 --> 00:04:38,310
We are using it in our registration form at the bottom of the template.

63
00:04:38,400 --> 00:04:42,240
We have a series of messages for different validators.

64
00:04:42,510 --> 00:04:45,090
Let's make one copy of these messages.

65
00:04:47,700 --> 00:04:53,520
The condition will be updated to check if the no match property is on the airs object.

66
00:04:55,980 --> 00:05:00,630
As for the message, it'll say the following passwords do not match.

67
00:05:03,070 --> 00:05:04,480
There's one last step.

68
00:05:04,720 --> 00:05:10,960
We have logged the error below the form, we should remove it now that we have a proper error message.

69
00:05:11,200 --> 00:05:13,660
Open the register template file.

70
00:05:16,210 --> 00:05:17,740
At the bottom of the template.

71
00:05:17,830 --> 00:05:19,240
Remove the expression.

72
00:05:21,730 --> 00:05:23,530
Let's give our form a test.

73
00:05:26,010 --> 00:05:33,000
We will need to type inside both password fields to trigger the error our input component will not render

74
00:05:33,000 --> 00:05:36,450
an error message until both components have been touched.

75
00:05:36,780 --> 00:05:40,440
After doing so, the error message appears perfect.

76
00:05:40,680 --> 00:05:43,110
Let's try inputting matching values.

77
00:05:45,600 --> 00:05:47,190
The errors have gone away.

78
00:05:47,460 --> 00:05:51,810
We've successfully validated the input with a custom validator.

79
00:05:52,200 --> 00:05:58,350
We can move on to validating the email field with an asynchronous validator, which presents a set of

80
00:05:58,350 --> 00:05:59,430
different problems.

81
00:05:59,700 --> 00:06:02,670
Let's tackle this validator in the next lecture.