In this lecture, we are going to register a new form.
Believe it or not, we've already done so without having to write a single line of code.
We registered a new form with Angular.
To better understand, open the login template file.
Everything inside this file is completely static.
It doesn't have directives, bindings or expressions.
Behind the scenes, the Forms module has registered the form element in our template.
Let's hover our mouse over the form element, according to our editors.
It'll tell us the form element is being controlled by a directive called Nji Form.
Unfortunately, additional information is not being given to us if we'd like to learn more.
We should check out the documentation in the resource section of this lecture.
I provide a link to the Kng Form Directive.
Let's read the description together, it says the following creates a top level form group instance
and binds it to a form to track aggregate form value and validation status.
The most important piece of this description is the very beginning.
This directive will create an instance out of the form group class.
Sound familiar?
It's the same object we instantiated in the register component.
Previously, we had to create this instance ourselves with template forms.
They're automatically created for us below the description we will find where this directive comes from.
It's exported by the Forms module, the same module we imported in the last lecture.
The question is how long is this directive know when to create a new instance of the form group object?
If we scroll to the next section, the documentation will provide a list of selectors for this directive.
We're not restricted to a single selector.
Directives may have multiple selectors.
The first selector will tell us everything we need to know.
It seems wild, but this is a valid CIUSSS selector.
This directive will be applied to form elements.
The latter portion will prevent this directive from being applied to forms already bound to a form group.
That's good.
Our registration form is bound to a form group.
We don't want to confuse angular.
Luckily, we don't need to modify our code base angular checks our templates before applying a directive.
There is one last piece of information we should check out in the documentation on this page.
There's a table of properties.
The property we're interested in reading is the form property.
This property contains the instance of the form group class.
We can verify this property through the angular developer tools.
Open the developer tools for our app.
Search for the logging component.
Inside this component, we will find the form element, according to the final three.
It has the Energy Form Directive applied to it.
There are other directives, but they're not as important.
We're going to focus solely on the Energy Form Directive.
Under the list of properties, we will find the form object.
If we look inside, we will find a list of properties we are familiar with these properties, we can
check for errors, validation or grab the values from the fields.
It's the same object we worked with before we didn't get you write much code, but that's the beauty
of template forms.
It's not necessary to configure forms in a class file.
We can configure forms directly in a template.
Every form element will be bound to a unique instance of the form group class.
This is why template driven forms have a lower learning curve in the following lecture.
We are going to start working on the input fields.