Reusing the Input

We’ve got a functional input with validation. We were able to get everything working thanks to the reactive form system in Angular. With that being said, our template looks a bit ugly. So far, we’ve only worked on one input. We’ll need to do the same thing to the other inputs. Aside from clutter, we’ll most likely be repeating the same error messages.

The best way to fix these issues is to create a component to output the input. We’ll make the component reusable. This way, we’ll be able to use it for the other inputs.

Input component

First, we’ll create the component. In the command line, we’ll run the following command:

ng generate component Input

Next, we’ll move the <input> and <ng-container> from the app.component.html template file to the input.component.html template file.

Here’s what the input.component.html template will look like: