Creating a Reusable Input

In this lesson, we're going to make the input more reusable for outputting errors.

We'll cover the following

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.


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.

Get hands-on with 1200+ tech skills courses.