Creating a Reusable Input

We’re finished creating the validators. If you’d like to continue to the next section, feel free to do so. This lesson and the next will cover converting the inputs into a reusable component. We’ll be doing this so we won’t have to rewrite the errors for every input.

Generating a component

The first thing we’ll do is generate the component for storing the input and its errors. In the command line, run the following command:

ng generate component input

We won’t need to do anything further since the CLI will automatically register it with the app module.

Input

We’ll require two things from the parent component: the form control and the type of input. We’ll want to use this component for the email and password. Both inputs have different types. We’ll need to bind the type on the <input> element if we want to change it at will.

In the input.component.ts class file, we’ll add properties to modify the type and form control on the input.