1
00:00:00,210 --> 00:00:07,230
In this lecture, we are going to create some form controls, a form control is an object that controls

2
00:00:07,230 --> 00:00:10,980
an individual input field for every input field.

3
00:00:10,980 --> 00:00:14,520
In our form, we should have a corresponding form control.

4
00:00:14,880 --> 00:00:18,150
Once again, it's similar to our tab's components.

5
00:00:18,450 --> 00:00:21,450
We had a component for controlling a single tap.

6
00:00:21,780 --> 00:00:25,440
A form control will control a single input field.

7
00:00:25,770 --> 00:00:30,240
We are going to continue working inside the register component class.

8
00:00:32,870 --> 00:00:40,160
We will update the import statement from the Angular Forms package by adding the form control object.

9
00:00:42,860 --> 00:00:48,530
We need to register our inputs by creating a new instance of the form control object.

10
00:00:48,950 --> 00:00:54,440
These new instances must be added inside the object passed into the form group.

11
00:00:54,830 --> 00:01:01,580
Inside this object, the property name will represent the name of the control before we start adding

12
00:01:01,580 --> 00:01:02,660
some controls.

13
00:01:02,810 --> 00:01:04,459
We should check out our form.

14
00:01:04,849 --> 00:01:07,760
We'll need an overview of what we need to register.

15
00:01:08,330 --> 00:01:10,610
Open the register template file.

16
00:01:13,190 --> 00:01:20,960
Inside this template, we have about seven fields there the name, email, age, password, confirm,

17
00:01:20,960 --> 00:01:23,510
password and phone number fields.

18
00:01:23,840 --> 00:01:27,210
Each of these fields should be controlled by our form group.

19
00:01:27,620 --> 00:01:29,420
Go back to the class file.

20
00:01:29,660 --> 00:01:33,920
Let's do the name field together inside the object.

21
00:01:34,040 --> 00:01:36,290
We will add a property called name.

22
00:01:36,740 --> 00:01:42,140
The value for this property will be a new instance of the form control object.

23
00:01:44,690 --> 00:01:47,810
We can't configure the inputs through this object.

24
00:01:48,200 --> 00:01:52,490
The name of the property doesn't need to correspond to the input field.

25
00:01:52,820 --> 00:01:56,270
However, it's easier to connect the two in my mind.

26
00:01:56,600 --> 00:02:00,620
I recommend using names similar to their respective inputs.

27
00:02:00,980 --> 00:02:07,850
Controls are added as key value pairs in the object passed into the constructor function of the form

28
00:02:07,850 --> 00:02:08,780
group class.

29
00:02:09,410 --> 00:02:15,140
We can pass in a default value for our controls by passing in a value to the instance.

30
00:02:15,530 --> 00:02:17,540
We will pass in an empty string.

31
00:02:17,960 --> 00:02:20,870
Users should provide the values for our form.

32
00:02:21,230 --> 00:02:26,290
We don't need to provide default values for every input in our form.

33
00:02:26,330 --> 00:02:28,880
We should add a new instance to the group.

34
00:02:29,240 --> 00:02:31,610
Let's add the rest of our input fields.

35
00:02:31,850 --> 00:02:33,560
I'm going to do that quickly.

36
00:02:41,060 --> 00:02:43,520
In total, there are six properties.

37
00:02:43,820 --> 00:02:46,640
Let's check out the group in the developer tools.

38
00:02:49,060 --> 00:02:52,900
Search for the register component under this component.

39
00:02:53,050 --> 00:02:59,350
We will have our register form group, we can find the controllers for the group by searching for a

40
00:02:59,350 --> 00:03:01,210
property called Controls.

41
00:03:01,630 --> 00:03:05,020
Angular will store the controllers under this property.

42
00:03:05,410 --> 00:03:11,170
Take the time to verify every controller was added to this object in the next lecture.

43
00:03:11,260 --> 00:03:14,770
We will bind our group to the form in the template.