Creating custom FormControl(s) in Angular using ControlValueAccessor

In this tutorial, I'll teach you how to create custom form controls in Angular using the ControlValueAccessor. The best part of creating a custom FormControl is that you can use it with both Template Driven Forms and Reactive Forms. Once you've finished viewing the video, you'll be able to create your own custom form controls that you can use within different Angular applications.

Code:

🎥🎤📷 GEAR for Content Creation (contains affiliate links) 🎥🎤📷:
Audio-Technica AT2020USB+ Cardioid Condenser USB Microphone
Blue Microphones iCE USB Mic
Sony a5100 Camera
Elgato Key Light, 2800 Lumens
Sigma 16mm f/1.4 DC DN Contemporary Lens for Sony E (402965)
Philips Hue Go White and Color Portable Dimmable LED
Logitech G PRO X Gaming Headset (2nd Generation)
ASUS TUF Gaming 27" 2K HDR Curved Monitor (VG27WQ1B)
SAMSUNG 27-Inch CRG5 240Hz Curved Gaming Monitor (LC27RG50FQNXZA)
Logitech G Pro Wireless Gaming Mouse
Corsair K70 RGB MK.2 Mechanical Gaming Keyboard

❤️❤️ Become a Supporter (because you're awesome):

❤️ Support the CodeWithAhsan community One-Time-Only:

🎥 Live Streams / Free sessions:

🧑‍🤝‍🧑 Join the Discord Community:

👉 Socials:

[SuperYkf]

Best explanation on the ControlValueAccessor. Thanks

[bhakyabalakrishnan]

This video is gold. Thanks for explaining every bit if it..

[sidikithomas]

I watched a video before yours with more than 1k likes but I didn’t understand anything; I said to myself let’s find an Indian(sorry if you are not an indian) and I’m not disappointed. Now I know why and when to use control value accessor and I have subscribed to your channel

[vinaytandel]

I liked your video and your explanation. I had already created a workable component earlier, but I still made a few changes to it as per the code written in your component. I was facing an issue with my previous code as well as the code modified as per yours. It makes me mandatory to import that component in the module file of the page and declare it. If I don't import and declare it then it gives me an error 'No value accessor for form control name...'. I don't mind importing and declaring it but then it works only on that page alone. If I want to use it on other pages as well and hence if I import in the module of another page, then it gives a compilation error that 'COMPONENT_NAME is listed in the declarations of the NgModule of THAT_PAGE_NAME'. I want my component to be reusable. May I request you assist me in resolving this issue? Please. Thank you.

[rpiisenh]

How to handle form control validations? How to make it dynamic? Something like if value is this than apply this validation, if value is that apply that validation. It is nice for one or two, but what if u have 10-20 form controls and u will end up a messy component full of validation logic.
Is it possible to make a validation portable, so we can apply the same validation for multiple control across multiple forms/Global validation for specific form control?