Reusing the Input
Discover how to refactor Angular reactive forms by creating reusable input components. Learn to manually bind form controls between components to maintain validation while simplifying your templates and avoiding code duplication.
We'll cover the following...
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