In this lecture, we are going to bind the form group to the form in the template Angular will not automatically
connect the group in our class to the form in the templates.
They are completely disconnected from one another.
We need to establish a relationship between the group in our class and the form element in the template.
We can connect the two by binding the form.
Open the register template file.
On the form element, we are going to bind a directive called Form Group.
The Form Group Directive will help us find our form to the group in the class.
The value for this directive must be the form group object.
We will pass in the register form object.
Our group and form have been successfully connected.
We will be able to control the form up through the group in our class.
The form is not the only element we need to bind.
The input fields need to be bound to their respective controllers.
Let's start with the name.
The first field in the form is for the name.
We can bind a controller to the input by adding the Form Control Name Directive.
We don't need to buying this property.
The value for this property must be a string.
If we don't buying the property, the value will automatically be interpreted as a strain.
We're going to pass in the name of the controller, which is name.
You'll notice we're not providing the name of the form group.
We don't have to angular will search through our template to find an ancestor element with the Form
Group Directive if it finds this directive.
It'll search for the controller bound to this group.
Therefore, we don't need to provide the full path to the controller.
It'll be searched from within the group by binding the controller to the input.
Angular will take care of storing and updating the property in the group.
Let's check out the app in the browser.
If we open the registration form, the form appears without a problem.
We can type inside the name field, believe it or not, Angular is keeping track of the value of the
input fields.
We can check the developer tools to verify the value.
Open the angular developer tools.
Search for the register component.
We can find the values for our fields by opening the value object.
It stores the value from the input field, as we can see, it's holding the same value we had in the
field.
We've successfully stored the value of another property.
Worth checking out is the status property.
The saddest property will tell us if a form is valid.
We haven't had the opportunity to talk about validation yet.
We will tackle this topic in the next lecture.