1
00:00:00,180 --> 00:00:06,630
In this lecture, we are going to continue working with our custom validator validators must return

2
00:00:06,630 --> 00:00:09,420
either an object containing errors or null.

3
00:00:09,840 --> 00:00:16,470
We should annotate the methods return type for type safety, angular exports, a type for a methods

4
00:00:16,470 --> 00:00:17,460
return value.

5
00:00:17,670 --> 00:00:21,300
We should take advantage of this type at the top of the file.

6
00:00:21,420 --> 00:00:26,580
Import the validation errors type from the Angular Forms package.

7
00:00:29,040 --> 00:00:34,200
Next, we will annotate the return type of the match method with this type.

8
00:00:36,760 --> 00:00:41,620
We can hover our mouse over this tight to view the type of value we can return.

9
00:00:42,040 --> 00:00:44,590
It's a relatively simple type definition.

10
00:00:44,920 --> 00:00:48,860
We are allowed to return an object with any key value pairs.

11
00:00:49,360 --> 00:00:53,260
Remember, returning an object will be interpreted as an error.

12
00:00:53,560 --> 00:00:57,340
We can add information about the error through the object we're returning.

13
00:00:58,060 --> 00:01:00,700
What if we want to indicate there aren't errors?

14
00:01:00,880 --> 00:01:03,280
In this case, we can return null.

15
00:01:03,580 --> 00:01:09,970
Let's update the return type to a union type by including nor as a possible return value.

16
00:01:12,560 --> 00:01:16,790
The next step is to accept the form group at the top of the file.

17
00:01:16,880 --> 00:01:21,800
We will update the import statement to include the abstract control class.

18
00:01:24,360 --> 00:01:31,110
Inside the match methods arguments, we will add an argument called group annotated with the abstract

19
00:01:31,110 --> 00:01:32,160
control class.

20
00:01:34,650 --> 00:01:42,510
As a reminder, the abstract control class is inherited by the form control and form group classes,

21
00:01:42,930 --> 00:01:49,830
we can accept either class by entertaining the argument with the abstract control class by accepting

22
00:01:49,830 --> 00:01:50,370
the group.

23
00:01:50,490 --> 00:01:53,370
We all have access to every control in the group.

24
00:01:53,760 --> 00:01:57,120
The main goal of this function is to match the passwords.

25
00:01:57,390 --> 00:02:00,810
Let's assign the controls to variables for readability.

26
00:02:01,110 --> 00:02:06,030
First, we will create a variable for the password field called control.

27
00:02:06,480 --> 00:02:11,340
The value for this variable will be the group Typekit password function.

28
00:02:13,920 --> 00:02:16,980
The next variable will be called matching control.

29
00:02:17,310 --> 00:02:20,410
Its value will be the group don't get confirmed.

30
00:02:20,430 --> 00:02:21,510
Password function.

31
00:02:24,100 --> 00:02:30,760
The get function will return the form controls from within a group before we start comparing their values.

32
00:02:30,910 --> 00:02:33,550
We should check if a control can't be found.

33
00:02:33,940 --> 00:02:40,990
Otherwise, we won't be able to compare their values after defining the variables and a conditional

34
00:02:40,990 --> 00:02:44,140
statement to check if either variable is empty.

35
00:02:46,670 --> 00:02:52,430
If they are, we are going to return an object with the error message found for the developer.

36
00:02:52,760 --> 00:02:59,030
The object will contain a property called controlled not found with an initial value of false.

37
00:03:01,580 --> 00:03:04,940
The error has nothing to do with the values themselves.

38
00:03:05,210 --> 00:03:10,370
However, we should provide a helpful error for developers using our validator.

39
00:03:10,640 --> 00:03:13,310
It's going to help them debug the validator.

40
00:03:13,820 --> 00:03:16,970
We can begin comparing their values below.

41
00:03:16,970 --> 00:03:20,360
These variables create a variable called error.

42
00:03:20,840 --> 00:03:24,560
The value for this variable will be a ternary operator.

43
00:03:24,890 --> 00:03:32,210
We will check if the control value property is strictly equal to matching control value property.

44
00:03:34,790 --> 00:03:37,700
If these fields match, we can return null.

45
00:03:40,260 --> 00:03:46,980
Otherwise, we can return an object with a property called no match with an initial value of true.

46
00:03:49,540 --> 00:03:52,330
Lastly, we can return this variable.

47
00:03:54,870 --> 00:03:58,410
Our validator is ready, we can apply it to our form.

48
00:03:58,680 --> 00:04:01,740
Open the register component class file.

49
00:04:04,460 --> 00:04:09,080
At the top of the file, we will import the register of Validators class.

50
00:04:11,600 --> 00:04:15,740
Normally we would have to create a new instance out of this class.

51
00:04:15,980 --> 00:04:18,769
Luckily, our match method is static.

52
00:04:19,040 --> 00:04:24,620
We can pass this function on to the form group, search for the form group definition.

53
00:04:24,980 --> 00:04:28,640
We are creating a new group with the Form Group class.

54
00:04:29,000 --> 00:04:33,800
The first argument of the constructor function is a list of form controls.

55
00:04:34,400 --> 00:04:36,500
There's a second optional argument.

56
00:04:36,770 --> 00:04:38,540
It's an array of validators.

57
00:04:38,540 --> 00:04:40,700
We want to apply to the whole group.

58
00:04:41,090 --> 00:04:46,160
We will pass in an array with the register validators dot match function.

59
00:04:48,800 --> 00:04:52,970
Angular will automatically invoke this function with the form group.

60
00:04:53,300 --> 00:05:00,470
We don't have to do anything else on our end just to make sure we should log the errors open the register

61
00:05:00,470 --> 00:05:01,520
template file.

62
00:05:04,130 --> 00:05:06,170
Scroll to the bottom of that template.

63
00:05:06,560 --> 00:05:12,830
We will add an expression to output the register form dot errors property with the JSON pipe.

64
00:05:15,290 --> 00:05:21,140
In a future lecture, we will work on adequately handling errors from custom validators.

65
00:05:21,380 --> 00:05:23,570
For now, this solution will work.

66
00:05:23,860 --> 00:05:25,760
Refresh the form in the browser.

67
00:05:28,350 --> 00:05:32,310
Type inside the password fields with non matching values.

68
00:05:34,630 --> 00:05:38,110
At the bottom of the form, we're told the errors don't match.

69
00:05:38,350 --> 00:05:38,980
Perfect.

70
00:05:39,280 --> 00:05:46,240
We can adjust the values to make them match if they match, a no value is returned by our validator

71
00:05:46,240 --> 00:05:46,810
function.

72
00:05:47,080 --> 00:05:53,410
As you can see, validator functions are regular functions that accept a form group or control.

73
00:05:53,740 --> 00:05:57,040
We can access their values to perform validation.

74
00:05:57,610 --> 00:06:00,850
Creating validators is a simple process overall.

75
00:06:01,150 --> 00:06:07,300
We're going to improve our current implementation by converting our validator function to a factory

76
00:06:07,300 --> 00:06:07,840
function.

77
00:06:08,200 --> 00:06:11,890
Let's discuss what factory functions are in the next lecture.