1
00:00:00,210 --> 00:00:05,400
In this lecture, we going to update our template to finalize the input component.

2
00:00:05,820 --> 00:00:09,390
We will be working inside the input component template file.

3
00:00:12,090 --> 00:00:13,710
A ton of errors will appear.

4
00:00:14,040 --> 00:00:16,650
We will start from the top and work our way down.

5
00:00:17,040 --> 00:00:21,090
Visual Studio Code, or TypeScript, does not pick up the first error.

6
00:00:21,540 --> 00:00:27,030
The minimum length attribute is on the input element by leaving this attribute alone.

7
00:00:27,240 --> 00:00:30,630
The same validation will be performed on every input.

8
00:00:30,930 --> 00:00:32,070
We don't want that.

9
00:00:32,340 --> 00:00:35,280
We want the input component to be reusable.

10
00:00:35,640 --> 00:00:38,640
The validator should come from the parent component.

11
00:00:38,970 --> 00:00:42,150
We are going to remove the minimum length attribute.

12
00:00:44,790 --> 00:00:48,750
This validation should still be performed for the name control.

13
00:00:49,080 --> 00:00:50,370
Let's send it back in.

14
00:00:50,730 --> 00:00:53,490
Open the register component class file.

15
00:00:56,200 --> 00:01:03,310
Inside the array of validator functions for the main control we will and the validator minimum length

16
00:01:03,340 --> 00:01:04,599
validator a function.

17
00:01:07,210 --> 00:01:10,720
We need to pass in the minimum character length to this function.

18
00:01:11,080 --> 00:01:16,630
We will use the original value, which was three after making those changes.

19
00:01:16,660 --> 00:01:19,420
Let's go back to the input template file.

20
00:01:19,990 --> 00:01:24,730
The next change we will make is to the Form Control Name Directive.

21
00:01:25,180 --> 00:01:29,740
This directive will tell Angular to search for the control inside a group.

22
00:01:30,160 --> 00:01:31,630
There's just one problem.

23
00:01:31,990 --> 00:01:35,500
The input component doesn't have access to the group.

24
00:01:35,860 --> 00:01:42,370
However, we do have access to the control instead of telling Angular to find the form control.

25
00:01:42,520 --> 00:01:45,550
We can directly bind the control to the input.

26
00:01:45,940 --> 00:01:50,710
We will replace this directive with a different directive called form control.

27
00:01:53,330 --> 00:01:56,690
This property will be bound to the control property.

28
00:01:58,790 --> 00:02:00,980
The names of the directives are similar.

29
00:02:01,340 --> 00:02:03,320
There is a clear difference between them.

30
00:02:03,680 --> 00:02:10,759
The form controlled named directive will tell Angular to search for a control in the form group, whereas

31
00:02:10,759 --> 00:02:17,630
the Form Control Directive will allow us to directly bind the form control object to the input element.

32
00:02:18,110 --> 00:02:22,430
The Form Control Directive is a manual way to bind an input.

33
00:02:23,090 --> 00:02:25,910
After adding this binding, we all get an error.

34
00:02:26,300 --> 00:02:32,900
The error will tell us the following can't bind form control Since it isn't a known property of input,

35
00:02:33,560 --> 00:02:38,300
Angular does not know what the Form Control Directive is to angular.

36
00:02:38,390 --> 00:02:40,910
This directive is never defined in our app.

37
00:02:41,240 --> 00:02:45,680
The Form Control Directive is part of the Reactive Format module.

38
00:02:46,070 --> 00:02:51,350
Unfortunately, we don't have access to the features from the Reactive Format module.

39
00:02:51,800 --> 00:02:56,150
It's because the input component is declared under the shared module.

40
00:02:56,570 --> 00:03:00,770
D Reactive Performance Module is not imported into this module.

41
00:03:01,400 --> 00:03:05,810
We can fix this issue by importing the Reactive Forms module.

42
00:03:06,170 --> 00:03:08,270
Open the shared module file.

43
00:03:10,850 --> 00:03:17,810
At the top of the file import, the reactor performance module from the Angular Forms package.

44
00:03:20,230 --> 00:03:23,800
Next, add this module to the imports array.

45
00:03:26,490 --> 00:03:30,210
After making those changes, let's go back to our template.

46
00:03:30,510 --> 00:03:32,100
The error has gone away.

47
00:03:32,490 --> 00:03:35,060
The input is now down to the control.

48
00:03:35,430 --> 00:03:40,110
The last set of errors in our template have to do with the error messages.

49
00:03:40,440 --> 00:03:44,910
We're attempting to access the errors through the register form object.

50
00:03:45,270 --> 00:03:49,500
We can replace this part of the expression with the control object.

51
00:03:49,830 --> 00:03:52,560
I'm going to quickly update each expression.

52
00:04:00,800 --> 00:04:04,970
There's one less change I want to make on the paragraph element.

53
00:04:05,090 --> 00:04:10,340
We have the same conditions except for the last condition on both conditions.

54
00:04:10,490 --> 00:04:14,420
We're checking if the form control has been touched and changed.

55
00:04:14,780 --> 00:04:18,680
We will be applying these two conditions to every error message.

56
00:04:19,010 --> 00:04:24,140
Instead of writing the same condition, we should wrap our messages with an element.

57
00:04:24,680 --> 00:04:28,580
However, we don't want to change the structure of our document.

58
00:04:28,880 --> 00:04:32,990
Creating a nested HTML structure can clutter the document.

59
00:04:33,320 --> 00:04:40,190
Luckily, we can create an invisible element by wrapping the paragraph elements with an element called

60
00:04:40,190 --> 00:04:41,480
N.G. container.

61
00:04:47,070 --> 00:04:50,220
Angular defines the energy container element.

62
00:04:50,550 --> 00:04:53,790
The purpose of this element is to group elements.

63
00:04:54,030 --> 00:04:57,210
It's very similar to the energy template element.

64
00:04:59,420 --> 00:05:02,390
Both angular elements can group elements.

65
00:05:02,900 --> 00:05:04,790
They are invisible to the document.

66
00:05:05,180 --> 00:05:09,500
This feature allows us to keep the structure of the document the same.

67
00:05:09,920 --> 00:05:11,630
There's one difference between them.

68
00:05:11,930 --> 00:05:17,660
The energy container element will always render the content inserted inside it.

69
00:05:18,020 --> 00:05:24,860
The energy template element must have its content conditionally rendered if we don't add a structural

70
00:05:24,860 --> 00:05:27,530
directive to the energy template element.

71
00:05:27,830 --> 00:05:31,340
The content inside is never rendered in the document.

72
00:05:31,970 --> 00:05:38,220
It's optional to add a structural directive on the energy container element for our case.

73
00:05:38,300 --> 00:05:39,740
We all want to add one.

74
00:05:41,960 --> 00:05:48,710
From the first paragraph element, we will move the first two conditions over to the energy container

75
00:05:48,710 --> 00:05:49,340
element.

76
00:05:51,880 --> 00:05:57,910
We can remove the conditions from the second paragraph element, except for the last condition.

77
00:06:00,500 --> 00:06:02,120
Voila, we're finished.

78
00:06:02,330 --> 00:06:04,580
Let's refresh the form in the browser.

79
00:06:07,150 --> 00:06:12,860
The form is continuing to function if we type a single character into the name field.

80
00:06:12,910 --> 00:06:14,110
We will get an error.

81
00:06:14,410 --> 00:06:17,980
We've successfully created a reusable components.

82
00:06:18,310 --> 00:06:24,040
We won't need to repeatedly create the same input and errors in the next lecture.

83
00:06:24,100 --> 00:06:27,160
We are going to start working on the other fields.