Writing your own custom form control using ControlValueAccessor

Angular forms are great. While they support the default HTML tags like input, textarea, etc., sometimes, you might want to define your own components that take a value from the user. What if your components could work seamlessly with Angular forms, i.e., using formControlName, ngModel, and so on? That would be cool, right?

In this recipe, you’ll learn how to create a component with your own custom form control using the ControlValueAccessor API, allowing you to use your component with both template-driven forms and reactive forms.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-form-cva inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-form-cva
   

   This should open the app...