How to create custom form components in Angular with ControlValueAccessor

Demystify the ControlValueAccessor interface! In this video I cover how you can make your Angular components usable with ngModel and formControl by implementing the ControlValueAccessor interface.

This technique comes in handy when you want to create a custom form control, make your components more reusable, or when you want to break apart large forms into sub components.

I cover some of the theory behind the interface, walk through a specific example of making a pre-existing component work within an Angular form, and point out some common pitfalls you may run into.

0:00 - Introduction
0:45 - What is ControlValueAccessor?
1:35 - When you would use it
4:37 - Component values
6:26 - Code: Implementing the interface
16:50 - Code: Registering with the Injector
19:32 - Wrapup

[robertkameni]

Wow really nice and structured explanation and can you please make a video about decomposing large forms using this technique? Thanks so much again for this amazing video Sir

[vadimr]

This is the best explanation I have ever seen so far. Thak you.

[innaatanassoff]

Thank you! It was a very good explanation. Please continue with the advanced Angular topics.

[ovuokeaghwotu]

"Hope that was helpful"
It was! Thank you for sharing and looking forward to your video on decoupling complex forms.

[marcopolocs]

Great video. Finally I understand the point of the provider. Thanks a lot!

[bartheus]

Very good explanation, I'm starting to understanding it more and more now, will be great if u provide the examples for every type of input. I'm actually struggling with a custom reusable select input with bunch of different options provided from Backend using REST, as it will be used in different components with different options is very important to have it reusable. After selecting the option it should render a specific type of data in a table. This kind of example would be great, not only for me but for other people too. U are explaining thing very well. Subscription to ur channel is a mandatory thing !

[alexmanoel]

Tks, u helped me a lot with this video

[mitesh]

In the example you showed, I am able to understand: can we use existing value accessors, like has similar behaviour)? My knowledge is very little to angular.