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 would want to define your own components that take a value from the user. It would be great if the variables of those inputs were a part of the Angular form you're using already.

In this recipe, you'll learn how to create your own custom Form Control using the ControlValueAccessor API, so you can use the Form Control with both Template Driven forms and Reactive Forms.

Getting ready

The project for this recipe resides in chapter08/start_here/custom-form-control:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab and you should see the following view:

Figure 8.27 – Custom form control app running on http...