1
00:00:00,240 --> 00:00:06,720
In this lecture, we are going to bind the form control to the input component, the input component

2
00:00:06,720 --> 00:00:09,360
needs a form control for checking errors.

3
00:00:09,660 --> 00:00:12,660
The template doesn't have access to the group anymore.

4
00:00:12,870 --> 00:00:15,060
It's been moved to a different component.

5
00:00:15,390 --> 00:00:20,040
Luckily, it's perfectly valid to pass down the controller through inputs.

6
00:00:20,310 --> 00:00:22,980
Open the input component class file.

7
00:00:25,470 --> 00:00:31,620
We will need to update the angular slash core package to include the input decorator function.

8
00:00:34,070 --> 00:00:40,430
Next, inside the class, we will create a property called control with the input decorator.

9
00:00:42,880 --> 00:00:45,940
They it for this property will be form control.

10
00:00:48,500 --> 00:00:55,160
The form control class should have been imported after adding this type, if not added in manually.

11
00:00:55,490 --> 00:00:59,510
The class can be found under the Angular Forms package.

12
00:00:59,750 --> 00:01:05,720
Lastly, we will initialize this property to a new instance of the form control class.

13
00:01:08,350 --> 00:01:12,460
The compiler will complain if we don't initialize our properties.

14
00:01:12,790 --> 00:01:17,230
The value for this property will be overridden by the input decorator.

15
00:01:17,650 --> 00:01:19,780
It's not going to be a huge issue.

16
00:01:20,110 --> 00:01:24,940
In most cases, we will be sending a form control from the parent component.

17
00:01:25,390 --> 00:01:28,990
We won't have to worry about working with an empty form control.

18
00:01:29,350 --> 00:01:34,270
Let's pass down a control to this component from the register component.

19
00:01:34,660 --> 00:01:37,690
Open the register component template file.

20
00:01:40,330 --> 00:01:42,250
Search for the input component.

21
00:01:42,580 --> 00:01:45,220
We added one below the label for the name.

22
00:01:45,580 --> 00:01:52,030
We will bind the control property to the register form Dot Control's dot name object.

23
00:01:54,560 --> 00:02:01,430
After doing so, an error appears there's a red line below the binding of the control property.

24
00:02:01,760 --> 00:02:09,080
If we hover over this property, the error will tell us the following type abstract control is missing

25
00:02:09,080 --> 00:02:12,380
the following properties from Typeform control.

26
00:02:12,920 --> 00:02:14,240
It's a strange error.

27
00:02:14,570 --> 00:02:18,710
The error is telling us we're sending the wrong object to the component.

28
00:02:19,040 --> 00:02:24,710
The input component expects the object to be an instance of the form control class.

29
00:02:24,980 --> 00:02:30,800
Instead, we're passing down an object that's an instance of the abstract control class.

30
00:02:31,190 --> 00:02:33,650
Let me show you the problem with a diagram.

31
00:02:35,870 --> 00:02:43,520
Register form, dot controls, dot name property holds an object, the type of the object is abstract

32
00:02:43,520 --> 00:02:44,240
control.

33
00:02:44,800 --> 00:02:49,420
The control input wants an object with the type of form control.

34
00:02:49,790 --> 00:02:53,000
We are sending the wrong type of data to the component.

35
00:02:53,270 --> 00:02:54,890
The question is why?

36
00:02:57,210 --> 00:02:58,470
To find out why.

37
00:02:58,500 --> 00:03:01,670
Let's open the register component class file.

38
00:03:04,230 --> 00:03:07,920
Inside this class, we all add the constructor function.

39
00:03:10,540 --> 00:03:17,500
Inside the constructor function, we will type out the register form, dot controls, dot name property.

40
00:03:20,150 --> 00:03:22,460
We aren't going to lock the property.

41
00:03:22,670 --> 00:03:28,040
We simply want to type it out if we hover our mouse over the main property.

42
00:03:28,220 --> 00:03:33,480
The editor will tell us this property is an instance of the abstract control class.

43
00:03:33,770 --> 00:03:35,120
Really bizarre, right?

44
00:03:35,450 --> 00:03:40,490
In the form group, we are creating instances of the form control class.

45
00:03:40,850 --> 00:03:45,080
Therefore, they should be an instance of the form control class.

46
00:03:45,620 --> 00:03:49,070
So why is the compiler inferring a different type?

47
00:03:49,340 --> 00:03:52,580
The culprit has to do with the form group class.

48
00:03:52,850 --> 00:03:57,710
It's changing the type after creating a new instance of the Form Group class.

49
00:03:58,100 --> 00:04:04,850
Check this out Hover your mouse over the new instance of the Form Group class, hold down control on

50
00:04:04,850 --> 00:04:05,660
your keyboard.

51
00:04:06,020 --> 00:04:08,090
Next, click on this class.

52
00:04:10,570 --> 00:04:18,190
Our editors will open a TypeScript declaration file, as you already know, TypeScript enables developers

53
00:04:18,190 --> 00:04:19,959
to create custom types.

54
00:04:20,380 --> 00:04:22,780
Creating a type can clutter files.

55
00:04:23,080 --> 00:04:28,000
Most developers prefer to outsource custom types to separate files.

56
00:04:28,360 --> 00:04:33,010
A typed definition file is a file exclusively for custom types.

57
00:04:33,430 --> 00:04:35,770
They don't contain real business logic.

58
00:04:36,100 --> 00:04:40,690
Most definition files end with the d.a.'s extension.

59
00:04:41,290 --> 00:04:47,830
A declaration file provides information about the classes we're using by clicking on the Form Group

60
00:04:47,830 --> 00:04:48,430
class.

61
00:04:48,700 --> 00:04:51,220
We will be taken to the constructor function.

62
00:04:51,670 --> 00:04:55,960
Make sure you clicked on the new instance of the Form Group class.

63
00:04:56,380 --> 00:04:59,560
Otherwise, you may be taken elsewhere in the file.

64
00:05:00,100 --> 00:05:03,460
We're going to focus strictly on the constructor function.

65
00:05:03,640 --> 00:05:07,210
Specifically, we want to focus on the first argument.

66
00:05:07,510 --> 00:05:10,690
The first argument is an object called controls.

67
00:05:11,020 --> 00:05:14,620
This argument expects an object of form controls.

68
00:05:14,920 --> 00:05:18,640
We're already doing that in our components, looking closely.

69
00:05:18,850 --> 00:05:24,040
Each property in the object will be annotated with the abstract control class.

70
00:05:24,430 --> 00:05:25,480
Here's our problem.

71
00:05:25,900 --> 00:05:31,510
Angular is changing the type when a new instance of the form group class is created.

72
00:05:31,870 --> 00:05:35,110
It's perfectly valid to perform this type of action.

73
00:05:35,440 --> 00:05:41,800
Remember, when we read the documentation for the abstract control class, the documentation stated

74
00:05:41,800 --> 00:05:46,660
the form control class is a subclass of the abstract control class.

75
00:05:47,050 --> 00:05:50,770
TypeScript will allow Angular to perform this change.

76
00:05:51,400 --> 00:05:56,200
There are various solutions we can implement to help the compiler understand.

77
00:05:56,200 --> 00:05:59,380
We're sending an instance of the form control class.

78
00:05:59,770 --> 00:06:05,950
We can assert the type of data type in the input component or move the properties around.

79
00:06:06,310 --> 00:06:10,240
I think the simplest solution is to move the properties around.

80
00:06:10,510 --> 00:06:12,460
Let me show you what that looks like.

81
00:06:12,700 --> 00:06:19,390
Go back to the register component class inside the object passed into the form group class.

82
00:06:19,570 --> 00:06:21,520
We will cut everything inside.

83
00:06:21,910 --> 00:06:25,390
These properties will be moved outside the new instance.

84
00:06:25,690 --> 00:06:30,250
Instead, they will be properties of the register component class.

85
00:06:32,950 --> 00:06:39,730
We will need to change the commas into assignment operators, a.k.a. equal sign symbols.

86
00:06:46,660 --> 00:06:49,480
At the end of each line, remove the commas.

87
00:06:51,900 --> 00:06:58,170
Lastly, we will add the controls back inside the form group class through the this keyword.

88
00:07:05,950 --> 00:07:12,310
We don't need to directly create the controls inside the object, we pass into the form group class.

89
00:07:12,670 --> 00:07:19,980
They can be created outside and then passed in our forms will continue to work by separating them.

90
00:07:20,020 --> 00:07:26,890
We can pass our form controls directly to the input component instead of through the Register Form Group.

91
00:07:27,430 --> 00:07:34,420
Before we do, let's verify TypeScript can infer it the correct type inside the constructor function.

92
00:07:34,540 --> 00:07:37,480
We all change the line to this sort name.

93
00:07:40,220 --> 00:07:45,470
This time, TypeScript thinks the type of the name property is form control.

94
00:07:45,830 --> 00:07:46,460
Perfect.

95
00:07:46,730 --> 00:07:48,800
Let's remove the constructor function.

96
00:07:49,010 --> 00:07:50,390
We don't need it anymore.

97
00:07:52,800 --> 00:07:55,620
Go back to the register component template.

98
00:07:55,920 --> 00:08:02,820
Instead of binding the control property on the input component to register form dot controls dot name,

99
00:08:02,970 --> 00:08:05,250
we can bind it to the name property.

100
00:08:07,780 --> 00:08:14,500
After updating the binding, the error goes away, TypeScript is happy, we're almost finished designing

101
00:08:14,500 --> 00:08:15,920
the input component.

102
00:08:16,240 --> 00:08:19,870
We will need to update the template to start using our binding.

103
00:08:20,140 --> 00:08:23,140
We will tackle this step in the next lecture.