1
00:00:00,120 --> 00:00:03,300
In this lecture, we are going to register a new form.

2
00:00:03,570 --> 00:00:08,620
Believe it or not, we've already done so without having to write a single line of code.

3
00:00:08,700 --> 00:00:11,190
We registered a new form with Angular.

4
00:00:11,490 --> 00:00:14,820
To better understand, open the login template file.

5
00:00:17,370 --> 00:00:20,370
Everything inside this file is completely static.

6
00:00:20,550 --> 00:00:23,970
It doesn't have directives, bindings or expressions.

7
00:00:24,270 --> 00:00:29,700
Behind the scenes, the Forms module has registered the form element in our template.

8
00:00:30,030 --> 00:00:34,800
Let's hover our mouse over the form element, according to our editors.

9
00:00:35,010 --> 00:00:40,560
It'll tell us the form element is being controlled by a directive called Nji Form.

10
00:00:41,040 --> 00:00:46,840
Unfortunately, additional information is not being given to us if we'd like to learn more.

11
00:00:46,860 --> 00:00:51,450
We should check out the documentation in the resource section of this lecture.

12
00:00:51,660 --> 00:00:54,480
I provide a link to the Kng Form Directive.

13
00:00:57,010 --> 00:01:03,430
Let's read the description together, it says the following creates a top level form group instance

14
00:01:03,430 --> 00:01:08,350
and binds it to a form to track aggregate form value and validation status.

15
00:01:08,800 --> 00:01:12,400
The most important piece of this description is the very beginning.

16
00:01:12,790 --> 00:01:16,540
This directive will create an instance out of the form group class.

17
00:01:16,840 --> 00:01:17,830
Sound familiar?

18
00:01:18,040 --> 00:01:21,880
It's the same object we instantiated in the register component.

19
00:01:22,480 --> 00:01:27,370
Previously, we had to create this instance ourselves with template forms.

20
00:01:27,500 --> 00:01:33,670
They're automatically created for us below the description we will find where this directive comes from.

21
00:01:33,910 --> 00:01:39,400
It's exported by the Forms module, the same module we imported in the last lecture.

22
00:01:39,640 --> 00:01:46,150
The question is how long is this directive know when to create a new instance of the form group object?

23
00:01:46,810 --> 00:01:53,260
If we scroll to the next section, the documentation will provide a list of selectors for this directive.

24
00:01:53,620 --> 00:01:56,050
We're not restricted to a single selector.

25
00:01:56,350 --> 00:01:58,930
Directives may have multiple selectors.

26
00:01:59,230 --> 00:02:02,740
The first selector will tell us everything we need to know.

27
00:02:03,070 --> 00:02:06,490
It seems wild, but this is a valid CIUSSS selector.

28
00:02:06,850 --> 00:02:10,000
This directive will be applied to form elements.

29
00:02:10,690 --> 00:02:16,480
The latter portion will prevent this directive from being applied to forms already bound to a form group.

30
00:02:16,780 --> 00:02:17,470
That's good.

31
00:02:17,860 --> 00:02:20,800
Our registration form is bound to a form group.

32
00:02:21,040 --> 00:02:22,960
We don't want to confuse angular.

33
00:02:23,200 --> 00:02:30,100
Luckily, we don't need to modify our code base angular checks our templates before applying a directive.

34
00:02:30,640 --> 00:02:36,310
There is one last piece of information we should check out in the documentation on this page.

35
00:02:36,370 --> 00:02:38,050
There's a table of properties.

36
00:02:38,260 --> 00:02:42,130
The property we're interested in reading is the form property.

37
00:02:44,720 --> 00:02:48,380
This property contains the instance of the form group class.

38
00:02:48,650 --> 00:02:52,460
We can verify this property through the angular developer tools.

39
00:02:52,730 --> 00:02:55,160
Open the developer tools for our app.

40
00:02:57,700 --> 00:02:59,710
Search for the logging component.

41
00:03:02,210 --> 00:03:07,400
Inside this component, we will find the form element, according to the final three.

42
00:03:07,640 --> 00:03:10,670
It has the Energy Form Directive applied to it.

43
00:03:10,970 --> 00:03:13,970
There are other directives, but they're not as important.

44
00:03:14,240 --> 00:03:17,840
We're going to focus solely on the Energy Form Directive.

45
00:03:18,140 --> 00:03:21,740
Under the list of properties, we will find the form object.

46
00:03:24,270 --> 00:03:30,390
If we look inside, we will find a list of properties we are familiar with these properties, we can

47
00:03:30,390 --> 00:03:34,830
check for errors, validation or grab the values from the fields.

48
00:03:35,130 --> 00:03:41,160
It's the same object we worked with before we didn't get you write much code, but that's the beauty

49
00:03:41,160 --> 00:03:42,270
of template forms.

50
00:03:42,570 --> 00:03:45,960
It's not necessary to configure forms in a class file.

51
00:03:46,230 --> 00:03:49,080
We can configure forms directly in a template.

52
00:03:49,440 --> 00:03:54,420
Every form element will be bound to a unique instance of the form group class.

53
00:03:54,810 --> 00:04:00,540
This is why template driven forms have a lower learning curve in the following lecture.

54
00:04:00,720 --> 00:04:03,870
We are going to start working on the input fields.