When working with lots of forms, you’ll likely use similar controls repeatedly: A country selection dropdown, a state selection dropdown, a date-range picker with specific constraints, etc.
Instead of duplicating our code, which is never a good idea, Angular allows us to create custom form controls that integrate with Angular’s form validation mechanism.
This feature requires our custom control component to implement an interface called ControlValueAccessor
that has the following methods:
I have a detailed tutorial and code example if you want to dive deeper into that topic.
It’s also worth noting that you don’t have to start from scratch when implementing a control value accessor. Angular has a DefaultValueAccessor
directive (the one used by FormControl
, NgModel
, etc., in Angular forms) that can be invoked with the selector ngDefaultControl
, and there are a few more options available, such as the SelectControlValueAccessor
.