In this lecture, we going to update our template to finalize the input component.
We will be working inside the input component template file.
A ton of errors will appear.
We will start from the top and work our way down.
Visual Studio Code, or TypeScript, does not pick up the first error.
The minimum length attribute is on the input element by leaving this attribute alone.
The same validation will be performed on every input.
We don't want that.
We want the input component to be reusable.
The validator should come from the parent component.
We are going to remove the minimum length attribute.
This validation should still be performed for the name control.
Let's send it back in.
Open the register component class file.
Inside the array of validator functions for the main control we will and the validator minimum length
validator a function.
We need to pass in the minimum character length to this function.
We will use the original value, which was three after making those changes.
Let's go back to the input template file.
The next change we will make is to the Form Control Name Directive.
This directive will tell Angular to search for the control inside a group.
There's just one problem.
The input component doesn't have access to the group.
However, we do have access to the control instead of telling Angular to find the form control.
We can directly bind the control to the input.
We will replace this directive with a different directive called form control.
This property will be bound to the control property.
The names of the directives are similar.
There is a clear difference between them.
The form controlled named directive will tell Angular to search for a control in the form group, whereas
the Form Control Directive will allow us to directly bind the form control object to the input element.
The Form Control Directive is a manual way to bind an input.
After adding this binding, we all get an error.
The error will tell us the following can't bind form control Since it isn't a known property of input,
Angular does not know what the Form Control Directive is to angular.
This directive is never defined in our app.
The Form Control Directive is part of the Reactive Format module.
Unfortunately, we don't have access to the features from the Reactive Format module.
It's because the input component is declared under the shared module.
D Reactive Performance Module is not imported into this module.
We can fix this issue by importing the Reactive Forms module.
Open the shared module file.
At the top of the file import, the reactor performance module from the Angular Forms package.
Next, add this module to the imports array.
After making those changes, let's go back to our template.
The error has gone away.
The input is now down to the control.
The last set of errors in our template have to do with the error messages.
We're attempting to access the errors through the register form object.
We can replace this part of the expression with the control object.
I'm going to quickly update each expression.
There's one less change I want to make on the paragraph element.
We have the same conditions except for the last condition on both conditions.
We're checking if the form control has been touched and changed.
We will be applying these two conditions to every error message.
Instead of writing the same condition, we should wrap our messages with an element.
However, we don't want to change the structure of our document.
Creating a nested HTML structure can clutter the document.
Luckily, we can create an invisible element by wrapping the paragraph elements with an element called
N.G. container.
Angular defines the energy container element.
The purpose of this element is to group elements.
It's very similar to the energy template element.
Both angular elements can group elements.
They are invisible to the document.
This feature allows us to keep the structure of the document the same.
There's one difference between them.
The energy container element will always render the content inserted inside it.
The energy template element must have its content conditionally rendered if we don't add a structural
directive to the energy template element.
The content inside is never rendered in the document.
It's optional to add a structural directive on the energy container element for our case.
We all want to add one.
From the first paragraph element, we will move the first two conditions over to the energy container
element.
We can remove the conditions from the second paragraph element, except for the last condition.
Voila, we're finished.
Let's refresh the form in the browser.
The form is continuing to function if we type a single character into the name field.
We will get an error.
We've successfully created a reusable components.
We won't need to repeatedly create the same input and errors in the next lecture.
We are going to start working on the other fields.