In this lecture, we will learn how to access the groups and controls created by Angular.
We've talked about how Templar forms are not that different from reactive forms under the hood, template
forms use form groups and controls.
It might seem mysterious because we haven't imported those classes.
Angular can create these objects by searching for directives in our template.
The form element is treated as a directive.
A form group is bound to this element.
The same goes for the Energy Model Directive, but with a form control object.
This is the power of template forms rather than configuring B form from the component class.
We can configure the form through the template.
One of the main challenges for working with template forms is accessing properties from the group and
controls.
At the moment, we don't know if the form is valid.
This information will be crucial for validation.
One method of accessing the properties in the group is by using template variables.
Templates can create variables which might seem strange.
However, angular makes it possible to define variables from within our template file.
Let's give it a try.
Open the log in template file.
On the form element, we will add a hash character.
The harsh character allows us to declare a variable in the template after typing this character.
We need to provide a name for our variable.
We will set the name to log in form.
We don't need to provide a value for this variable angular will assign the element to the variable.
As a result, we can access the form elements properties in our template.
There are some limitations to template variables.
Firstly, there are only accessible in the template.
We can't use them in our components, nor can we use them in other components.
Let's try using this variable below the form element.
We will create a pair of div tags with an expression.
Inside this expression, we will output the auto complete property on the log form objects.
We can reference our variable through its name after the hash character.
We can treat it like a property in our class.
The property we're accessing is a native property that can be found on form elements.
It's not specific to angular, it's defined by the browser.
This property will tell us if autocomplete is enabled for the form.
Let's refresh the form to view the output.
Below the form, we can view the value of the auto complete property auto complete has turned on.
That's great, but we don't need this information.
We're trying to get information about the group or control for validation if we want that information.
We'll need to modify our variable before we do.
Let's check out the form element in the log in component with the developer tools.
Next to the name of the element is a list of classes and directives attached to the form element.
They are highlighted in yellow orange text by clicking on this element.
We can view the properties related to this element.
The list of properties is separated by their class.
As you can see, the Engine Control Status Group Class has its own set of properties.
They're separate from the Nji Form Directive properties.
The Energy Form Directive is what we care about.
It stores the properties related to the group and controls.
We need to tell Angular to give us access to this DirecTV's properties.
It's effortless to do.
Go back to the editor back on the form element.
We are going to update the template variable.
We will assign the variable to a value called N.G. form.
By default, if we don't assign a value to a template variable, angular will assume the value should
be the element.
However, if we want to access a class or directive, we can explicitly set the variable.
In this example, we're telling Angular to set the template variable to the Nji Form Directive.
We can verify this assignment by hovering our mouse over the log in form variable in the expression.
The type of our variable is energy form.
I'm going to quickly remove the assignment from the template variable.
This time, if we hover our mouse over the log and form variable, the type is set to HTML form element.
If I can do the changes, you will get an air under the auto complete property.
Our editor will tell us the auto complete property does not exist on the energy form object, which
makes sense.
We're not dealing with the form element anymore.
Instead, we have access to the form group.
Let's access a property called valid.
Next, let's refresh the page.
Under the forum, we will see true.
We haven't added validations yet.
So the form should be completely valid by using template variables we can access and elements properties.
If we need access to the directives or classes attached to an element, we can do so by explicitly stating
so in the next set of lectures, we all start using our template variables to help us with validation.