Custom controls with ControlValueAccessor
So far, we've learned about forms using standard form controls and input controls provided by Angular Material. However, it is possible for you to create custom user controls. If you implement the ControlValueAccessor
interface, then your custom controls will play nicely with forms and the ControlValueAccessor
interface's validation engine.
We will be creating the custom rater control shown in the following screenshot, and will place it as a control on the first step of ProfileComponent
:
Figure 11.12: The lemon rater user control
User controls are inherently highly reusable, tightly coupled, and customized components to enable rich user interactions. Let's implement one.
Implementing a custom rating control
The lemon rater will highlight the number of lemons selected dynamically as the user interacts with the control in real time. As such, creating a high-quality custom control is an expensive endeavor...