1
00:00:00,210 --> 00:00:06,720
In this lecture, we are going to bind the form group to the form in the template Angular will not automatically

2
00:00:06,720 --> 00:00:09,900
connect the group in our class to the form in the templates.

3
00:00:10,230 --> 00:00:12,750
They are completely disconnected from one another.

4
00:00:13,020 --> 00:00:19,290
We need to establish a relationship between the group in our class and the form element in the template.

5
00:00:19,800 --> 00:00:22,260
We can connect the two by binding the form.

6
00:00:22,590 --> 00:00:24,840
Open the register template file.

7
00:00:27,410 --> 00:00:32,210
On the form element, we are going to bind a directive called Form Group.

8
00:00:34,780 --> 00:00:39,550
The Form Group Directive will help us find our form to the group in the class.

9
00:00:39,940 --> 00:00:43,900
The value for this directive must be the form group object.

10
00:00:44,260 --> 00:00:47,290
We will pass in the register form object.

11
00:00:50,040 --> 00:00:52,890
Our group and form have been successfully connected.

12
00:00:53,160 --> 00:00:56,790
We will be able to control the form up through the group in our class.

13
00:00:57,120 --> 00:01:00,180
The form is not the only element we need to bind.

14
00:01:00,480 --> 00:01:04,530
The input fields need to be bound to their respective controllers.

15
00:01:04,769 --> 00:01:06,300
Let's start with the name.

16
00:01:06,840 --> 00:01:09,510
The first field in the form is for the name.

17
00:01:09,810 --> 00:01:15,000
We can bind a controller to the input by adding the Form Control Name Directive.

18
00:01:17,520 --> 00:01:19,680
We don't need to buying this property.

19
00:01:20,010 --> 00:01:22,740
The value for this property must be a string.

20
00:01:23,070 --> 00:01:28,470
If we don't buying the property, the value will automatically be interpreted as a strain.

21
00:01:28,860 --> 00:01:32,490
We're going to pass in the name of the controller, which is name.

22
00:01:35,060 --> 00:01:38,390
You'll notice we're not providing the name of the form group.

23
00:01:38,660 --> 00:01:45,200
We don't have to angular will search through our template to find an ancestor element with the Form

24
00:01:45,200 --> 00:01:48,740
Group Directive if it finds this directive.

25
00:01:48,930 --> 00:01:51,740
It'll search for the controller bound to this group.

26
00:01:52,130 --> 00:01:56,270
Therefore, we don't need to provide the full path to the controller.

27
00:01:56,510 --> 00:02:01,730
It'll be searched from within the group by binding the controller to the input.

28
00:02:01,970 --> 00:02:06,440
Angular will take care of storing and updating the property in the group.

29
00:02:06,770 --> 00:02:08,870
Let's check out the app in the browser.

30
00:02:11,430 --> 00:02:15,720
If we open the registration form, the form appears without a problem.

31
00:02:16,020 --> 00:02:22,530
We can type inside the name field, believe it or not, Angular is keeping track of the value of the

32
00:02:22,530 --> 00:02:23,550
input fields.

33
00:02:23,850 --> 00:02:27,330
We can check the developer tools to verify the value.

34
00:02:27,630 --> 00:02:29,970
Open the angular developer tools.

35
00:02:31,000 --> 00:02:33,070
Search for the register component.

36
00:02:33,370 --> 00:02:37,870
We can find the values for our fields by opening the value object.

37
00:02:40,290 --> 00:02:46,950
It stores the value from the input field, as we can see, it's holding the same value we had in the

38
00:02:46,950 --> 00:02:47,490
field.

39
00:02:47,760 --> 00:02:51,480
We've successfully stored the value of another property.

40
00:02:51,480 --> 00:02:54,240
Worth checking out is the status property.

41
00:02:54,690 --> 00:02:58,050
The saddest property will tell us if a form is valid.

42
00:02:58,620 --> 00:03:02,340
We haven't had the opportunity to talk about validation yet.

43
00:03:02,580 --> 00:03:05,520
We will tackle this topic in the next lecture.