1
00:00:00,180 --> 00:00:05,040
In this lecture, we are going to create a factory function for our validator.

2
00:00:05,400 --> 00:00:09,720
The validator works fine, but the current implementation can be improved.

3
00:00:10,050 --> 00:00:11,280
To understand why.

4
00:00:11,310 --> 00:00:12,300
Let's check it out.

5
00:00:12,600 --> 00:00:14,670
Open the register validators.

6
00:00:14,670 --> 00:00:16,140
File in your editor.

7
00:00:18,700 --> 00:00:25,660
Inside the match function, we are comparing the values from the password and confirm password controls.

8
00:00:26,110 --> 00:00:30,040
We're hard coding the names of the controls in the get function.

9
00:00:30,460 --> 00:00:32,320
Our function is not flexible.

10
00:00:32,590 --> 00:00:38,110
If we want to select a different pair of controls, we will need to modify the validator.

11
00:00:38,410 --> 00:00:41,680
We can resolve our issue with a factory function.

12
00:00:44,450 --> 00:00:50,450
Factory functions are a design pattern in programming for returning a new object or function.

13
00:00:50,840 --> 00:00:56,600
It's a pattern mainly aimed at creating objects, but can be written to return functions as well.

14
00:00:57,140 --> 00:01:02,810
The purpose of writing a factory function is to return a function tailored to our needs.

15
00:01:03,110 --> 00:01:05,030
It's perfect for our situation.

16
00:01:07,600 --> 00:01:11,860
You may be questioning why we need a factory function in the first place.

17
00:01:12,190 --> 00:01:13,360
That's a valid point.

18
00:01:13,630 --> 00:01:16,420
The truth is we don't have any other option.

19
00:01:16,750 --> 00:01:21,160
Let me show you why open the register component class file?

20
00:01:23,700 --> 00:01:26,220
Scroll down to the form group class.

21
00:01:26,610 --> 00:01:32,610
The second argument of the form group constructor function is an array of validator functions.

22
00:01:32,970 --> 00:01:35,070
The key word here is functions.

23
00:01:35,430 --> 00:01:39,060
You'll notice we're passing in the match function as a reference.

24
00:01:39,360 --> 00:01:43,230
We're not immediately calling this function when we add it to the array.

25
00:01:43,590 --> 00:01:45,810
Angular will call it on our behalf.

26
00:01:46,380 --> 00:01:51,270
If we were to add parentheses after the match function, we would receive an error.

27
00:01:51,690 --> 00:01:54,990
We're no longer passing in the function as a reference.

28
00:01:55,230 --> 00:02:00,030
Instead, the values returned by the function will be added to the array.

29
00:02:00,420 --> 00:02:02,730
This is normal JavaScript behavior.

30
00:02:02,940 --> 00:02:08,580
However, we want to be able to specify which controls in the group should be validated.

31
00:02:09,180 --> 00:02:12,120
Let's look at how other validators resolve this issue.

32
00:02:12,330 --> 00:02:18,570
Above the group, we're creating the phone number control be required validator is being passed in as

33
00:02:18,570 --> 00:02:21,690
a reference if we hover our mouse over this function.

34
00:02:21,970 --> 00:02:25,860
It'll return either a validation errors object or null.

35
00:02:28,410 --> 00:02:34,380
On the other hand, we're calling the minimum length function this time if we hover our mouse over this

36
00:02:34,380 --> 00:02:38,040
function and overturn something called a validator function.

37
00:02:38,370 --> 00:02:43,110
Behind the scenes, Angular has written factory functions for some of its validators.

38
00:02:43,410 --> 00:02:47,420
This allows us to customize the behavior of a validator function.

39
00:02:48,060 --> 00:02:54,300
If we want to be able to customize the controls used by our validator, we can rewrite our validator

40
00:02:54,300 --> 00:02:55,680
as a factory function.

41
00:02:56,070 --> 00:03:00,990
We will change the match function to return the function that'll perform the validation.

42
00:03:01,380 --> 00:03:05,970
We will customize this function by providing it with the names of the controls.

43
00:03:06,300 --> 00:03:07,470
Let's give it a try.

44
00:03:08,100 --> 00:03:10,560
Switch over to the register validators.

45
00:03:10,560 --> 00:03:12,950
File inside the match function.

46
00:03:12,960 --> 00:03:15,030
We will return an arrow function.

47
00:03:17,640 --> 00:03:22,410
Next, we are going to move the logic of the match function to the inner function.

48
00:03:25,040 --> 00:03:28,970
Afterward, we will move the arguments over to the inner function.

49
00:03:37,550 --> 00:03:42,560
Lastly, we will move the annotation for the return value to the inner function.

50
00:03:45,220 --> 00:03:50,770
Our factory function will return the function for performing the validation, the outer function will

51
00:03:50,770 --> 00:03:54,040
be responsible for accepting the names of the controls.

52
00:03:54,370 --> 00:03:57,310
The inner function will have access to this information.

53
00:03:57,610 --> 00:04:02,470
We should update the match functions arguments to accept the names of the controls.

54
00:04:02,800 --> 00:04:07,750
You will add to arguments called control name and matching control name.

55
00:04:08,170 --> 00:04:11,380
Both arguments will be annotated with the string type.

56
00:04:18,089 --> 00:04:20,399
This next step is going to be optional.

57
00:04:20,640 --> 00:04:26,970
We should describe the type of value returned by the match function, angular exports and interface

58
00:04:26,970 --> 00:04:31,710
for factory functions that return a validator at the top of the file.

59
00:04:31,830 --> 00:04:38,700
We will update the angular slash forms package to include an interface called validator function.

60
00:04:41,170 --> 00:04:44,500
We can hover our mouse to learn more about this interface.

61
00:04:44,650 --> 00:04:51,460
It says the following a function that receives a control and synchronously returns a map of validators

62
00:04:51,460 --> 00:04:52,250
if present.

63
00:04:52,480 --> 00:04:55,390
Otherwise, no, while not necessary.

64
00:04:55,570 --> 00:04:58,300
This interface can be helpful for type safety.

65
00:04:58,690 --> 00:05:02,740
TypeScript can help us verify we're returning a validator function.

66
00:05:03,130 --> 00:05:07,900
Let's annotate the return value of the match function with this interface.

67
00:05:10,430 --> 00:05:12,110
Our validator is complete.

68
00:05:12,410 --> 00:05:18,680
We've removed the original behavior by allowing a component to pass in the names of the controls.

69
00:05:18,860 --> 00:05:21,980
We can compare the values of any two controls.

70
00:05:22,280 --> 00:05:25,610
Let's update our component in the match function.

71
00:05:25,760 --> 00:05:33,410
We will pass in the names of the controls there at the password and confirm password controls, respectively.

72
00:05:36,040 --> 00:05:40,810
Let's test our new validator, open the registration form in your browser.

73
00:05:43,340 --> 00:05:49,580
Inside both password fields, let's type in some values as long as both values don't match.

74
00:05:49,730 --> 00:05:51,170
We will receive an error.

75
00:05:51,500 --> 00:05:57,110
We've successfully created a dynamic validator by using the factory design pattern.

76
00:05:57,440 --> 00:06:01,640
It's a pattern for creating new functions that are tailored to our needs.

77
00:06:02,010 --> 00:06:09,260
If we want to apply the same validator to a completely different set of fields we can, at the moment,

78
00:06:09,410 --> 00:06:11,960
we are rendering the object below the form.

79
00:06:12,170 --> 00:06:15,140
Let's do some air handling in the next lecture.