In this lecture, we are going to design an input component to clean up our forms.
We've got a functional input with validation.
Everything works thanks to the reactive form system in angular.
With that being said, our template looks ugly.
So far, we've completed one input.
We are going to perform validation on every input.
Aside from updating the inputs in our template, we will be reusing some of the validator functions.
For example, we are going to apply the required validator to every input.
The same error message will need to get rendered for every input.
As you can imagine, our template can quickly become cluttered.
The best way to prevent that from happening is by creating a component, we will create a component
for handling error messages for the input.
It's not going to contain any business logic besides accepting input from a parent component.
You may hear this type of component referred to as a presentational component.
They are components that focus on the presentation of a component, i.e. that template.
Our components are fed data and then present it.
They can also emit events.
We can think of our Atab component as a presentation component.
It doesn't have any logic besides accepting input data.
We are going to create a component for outputting the input and error messages.
It's not going to care about updating the data.
It's going to focus solely on presenting it in the command line.
We will run the following command engaged see shared slash input.
We are creating this component inside the shared module forms are very common in applications.
It's likely we're going to reuse the input component in various areas of our app.
Therefore, we are creating this component in the shared module to expose it to all areas of our app.
Let's move the template.
Open the register template file.
We are going to cut the template for the name field, cut the input element and the two paragraph elements.
Next, open the input template file.
Replace the current template with the template from the register component.
After doing so, we will receive some errors.
The relationship between the input and its respective form control has been severed.
The errors we're getting in our template will tell us it cannot find the form group or control.
We can fix these errors by passing on the control to the component as input data.
First, we need to export this component.
The register component and input component are registered in different modules.
Open the shared module file.
Inside the exports option, we will and the input component class.
We don't need to import this component.
It's already been imported by the Seelye.
We can start using our component in the register component.
Switch back to the registered template under the label for the name field.
We will add the app input element.
After loading the component, we need to start sending down data.
We will handle this step in the next lecture.