In this lecture, we are going to carry a couple of forum controls.
It's going to be a similar process to creating form groups.
We can add a directive to our elements to help angular identify the controls in our form.
In the resource section of this lecture, I provide a link to a directive called Kng Model.
Let's read the description together, creates a forum control instance from a domain model and binds
it to a form control element.
This directive will help us with creating a form control in our template before we start using this
directive.
We should verify two things.
First, we should verify its availability.
If we scroll down, we will come across a section called exported from.
This directive gets exported from the Foreman's module.
We have already imported this module.
We can start using this directive right away.
Secondly, we should verify these selector.
The next section will give us a list of selectors.
This directive can be added to any element that doesn't have the form control or form control name directives.
Great.
Unlike reactive forms, we don't have to do much to start using template forms.
We don't need to create instances in our class.
This is because template forms are configured in templates and set of component class files.
Let's begin using this directive.
Open the log in template file.
We will start with the input for the email.
It's the first input in the form on the input element.
We are going to add the name attribute.
Before adding the new model directive, we must assign a name to our input.
The name is used as the ID for the control.
It helps angular identify the control.
We can assign an ID to the control with the name attributes.
We will set the name attribute to email.
Next, let's add the new model directive.
Just like that, we've created a forum control.
We don't need to dive into our class to create a forum control with the Forms module, angular will
automate this process as long as we're using the correct selectors.
There's one final step we need to take.
We need to add two way data binding.
Two way binding is a feature for being able to listen to events and update values simultaneously.
We can skip the logic ourselves two way data binding as a convenient feature for updating values from
an input.
The syntax for a two way binding will look familiar.
Once we dive into it.
Two way binding syntax is optional.
It's already possible to listen to events on an element and update its value below the input element.
We will create another input element.
On this element, we will bind the value property and listen for the change event.
We can handle inputs with property and event findings.
This syntax is always available to us.
However, it is a lot to write.
Angular provides a shorthand way of accomplishing the same thing with two way binding.
Essentially, it combines the two syntax is together on the Energy Model Directive.
We will add property binding and event binding to the directive.
The new Model Directive can perform two tasks.
It can set the value attribute for an element with property binding.
At the same time, it'll limit any event whenever the value changes in the document.
So this is the same as this.
The new Model Directive is a convenient feature for updating an input and listening for changes using
two way data binding.
We can easily update the properties in our classes without writing most of the logic ourselves.
Let's bind this directive to a property called credentials.
Email.
This property doesn't exist in our class.
We should define it.
Open the log in component class file.
The final property called credentials, it'll be an object with two properties called email and password.
They'll both be set to empty strings.
We're storing the fields in an object.
We don't have to, but I recommend organizing your data in an object for organization reasons.
Let's try testing out our form.
In the browser or able to change the email in the form, let's send random values to both fields.
We can use the developer tools to help us verify the values are being updated in the object, search
for the logging component.
On this component, the credentials object is updated in real time, thanks to the new Model Directive.
We have a copy of our data in the components class.
It's not the only location where the controls values are stored.
The form group has a copy to nested inside.
The log in component is the form element.
We looked at this element in the last lecture.
It holds the form group instance under a form group.
Angular has added the controls inside the form to this group.
If we look under the list of properties, we can find our controls under the form controls property.
Angular is smart enough to register a control under this group.
It's able to make the connection for us as long as we're using the new Model Directive inside the form
element.
We should be good to go.
If the input element were outside of the form, Angular would not register the control with a group.
It's important to remember that with a few directives, we've created a form group and form control.
As you can see, template forms are way easier than reactive forms.
In the next lecture, we're going to continue exploring template driven forms.