Creating custom form controls in Angular (Control Value Accessors)

This video covers Control Value Accessors, and how we can use them to minimise boilerplate markup in our forms.
Github project: github.com/the...
ControlValueAccessor docs: angular.io/api...
Reactive forms docs: angular.io/gui...
IDE: Webstorm
Theme: Gradianto
Mic: Rode NTK / Rode Lavalier Go
Twitter: @theRyanSmee
Author: Ryan Smee
Open your laptop, spin up your favourite text editor and let's get writing some code!

[@rembautimes8808]

I would call this video: Power tips for Angular forms. These are the techniques that mitigates a ton of risk as it uses reusable well tested code. I just picked up Angular 3 weeks ago as my day job is in the corporate world . Not uncommon to have forms with over 30 fields in the banking sector so imagine having all that HTML repeated - maintenance will be a nightmare. Excellent video, deserves more views.

[@TheRyanSmee]

Thank you! I really appreciate the positive feedback 😊 I’m glad you found it useful

[@mbonet]

I just want to thank you so much for this video and sharing your knowledge and skills. The quality of the video itself, the structure, the **easy** way of explaining perhaps **complex** concepts is excellent. Your video is the best video related to angular custom form components I've seen. Congratulations and thanks again.

[@CCPony]

You, my friend, are an EXCELLENT presenter. I'm going to be watching for you.

[@TheRyanSmee]

Cheers mate, I really appreciate that! Hopefully you find the content useful😊

[@metalllus]

great great work as always, I haven't seen this discussed anywhere!

[@TheRyanSmee]

Hey, thanks for the always supporting my channel. I must admit, I can’t take all the credit for this idea - about 2 years ago a colleague opened my eyes to just how useful they can be and now I use them all over the place haha. Before that, I had only ever used them to make Angular inputs out of non-standard html elements. Thanks again for watching mate! 😊

[@deepak_kumar_s_]

Appreciated, It helps a lot to get details about the Control value Accessor, Thanks.

[@TheRyanSmee]

Yeah it’s a super powerful feature that I think is often overlooked. Cheers for watching and commenting

[@luizandreluz1635]

Thank you Ryan, really helped me, cheers from Brazil!

[@TheRyanSmee]

Brilliant, I’m really glad to hear! Thank you for watching and commenting 🙌

[@Billy_Herrington__]

Here I am on KZbin wonted to watch something funny and stupid after work, and I can’t take my eyes of this one. Very good content

[@saikumardesu1700]

The most appropriate one, I was looking for. Thank you very much for the nice presentation.

[@TheRyanSmee]

Thank you! I’m glad you found it useful 😊

[@andyhb1970]

Great tutorial, thanks for taking the time to do it!

[@fattahkartish9428]

Amazing..thanks a lot for this video and for sharing your knowledge, subscribed! What theme you are using?

[@sagar-vispute]

Buddy, you are amazing, thanks for sharing this wonderful knowledge to us

[@TheRyanSmee]

Thank you for watching - I’m really glad you found it useful! 😊

[@amandasimonds9]

thank god for good teachers like you. you got a like and subscribe from me. thank you!!

[@evamotto9276]

I wish these custom form control videos covered template driven forms. I've created a custom form control that's working great with reactive forms, but the template side doesn't seem to be built into ControlValueAccessor as Angular's docs claim.

[@nudigitalvibe]

I had to even like the video before even finishing it. This is good stuff.

[@TheRyanSmee]

Thank you for the kind words! I’m really glad you found it useful 🙂

[@GiorgiNatenadze-v1s]

You are a genious mr Ryan ! Thanks a lot ! You helped me much !

[@TheRyanSmee]

Thank you so much for watching and commenting. I’m really glad I could help 👍

[@syedsuhaibzia1558]

amazing explanation and so so so easy to do it bcoz of his beautiful explanation

[@TheRyanSmee]

Thanks for watching and commenting! I’m super glad you found it helpful 😊 your comment is really kind, thanks!

[@thalysonevilasiobrandao6572]

Would it be a bad practice to get the parent form by using the FormGroupDirective instead of passing it as an input parameter?

[@javidg4197]

Absolute beauty.. it would be even more good if we can see it for Date and Dropdown .

[@TheRyanSmee]

It’s actually almost an identical process. I tend to use a 3rd party library for my date pickers and select boxes as there’s usually a but load of accessibility and cross browser edge cases that are easily missed. Assuming you are using a 3rd party component, you can just drop it into your component with any error handling/labels etc and it should just work 😊

[@edems131]

Awsome video

[@TheRyanSmee]

Thank you! I'm glad you found it useful

[@honghanlim3859]

This video is amazing. Just the content I needed. Thanks!

[@TheRyanSmee]

Thanks, I really glad you found it helpful 😊

[@andresibarramunoz7948]

Hello, first of all thank you very much for this great tutorial, I have a big problem regarding the reset of the form, I have not been able to get this.form.reset to work for me, now what is the form currently doing if it gives the reset... When seeing the form.value the values ​​are cleaned, but the fields in the inputs keep the text despite the fact that the form no longer has values, I really appreciate your help.

[@user-rp9iis1en6h]

Instead of creating one module for one control, couldn't we put all controls inside a module? Would it create any problem?

[@lironzaa]

i try to bind the value with : [value]="value" and it doesnt work. only the ng model bind is working : [(ngModel)]="value" and it seems bit odd because i want to use reactive forms only, any suggestions why is it not working with [value]="value"?

[@pgc1721]

Hi, Thank you very much for posting this advanced stuff. Could you please tell me where is defined?

[@TheRyanSmee]

Hi. In this project i'm using the free Angular Fontawesome package: www.npmjs.com/package/@fortawesome/angular-fontawesome Once the packages are installed you just have to add them to the module that you'd like to use them in. Theres a few different ways to do this, but i've done it as follows: github.com/theryansmee/angular-custom-form-controls/blob/master/src/app/app.module.ts I hope this helps 😊Thanks for watching

[@pgc1721]

@@TheRyanSmee Thank you so much for replying Mr. Ryan. I really appreciate your work. Wish you a very happy new year. Cheers :-)

[@TheRyanSmee]

No worries, I’m always happy to help. Thank you for watching videos and commenting. Happy new year to you too!

[@carlesalbertnavedapallares1272]

Great video and very useful! Thnks :)

[@mousikeanurag7519]

Thanks, but why it is not working when i use it as in angular element ?

[@naimeahmed1192]

Thank you very much sir. I like the idea very much.

[@TheRyanSmee]

Thank you! I’m really glad you found this video useful 😊

[@TatharVardamir]

muchas gracias por el contenido!😁

[@TheRyanSmee]

De nada! 😊

[@jeffl6571]

Amazing explanation! Thanks!

[@TheRyanSmee]

Thanks mate! Really glad you enjoyed it 😊

[@bug18486]

Hi Ryan Thanks for the great technique, I haven't seen this before. However, I have some question 1. In input.component.ts, You have created 3 inputs as parentForm, filedName and label When you pass the value in the registration-form.html like this Why only parentForm has the square brackets, the fieldName and label not have it. 2. I try to follow you step by step in this clip, I have a problem with the password-input, the eye icon disappears and when I type in the password field, it always shows the password not show dot. Thanks.

[@TheRyanSmee]

Sorry for the late reply. I must have missed the notification. Do you still need help with this?

[@TheRyanSmee]

1. Only the dynamic attributes that take a variable need square brackets. If an attribute has a hard coded string as a value then it doesn't need square brackets . That said, if for whatever reason you wanted to use square brackets, you can add single quotes e.g fieldName="name" is the same as [fieldName]="`name`" 2. With the password input, have you made sure to add [type]="passwordFieldType"? The togglePasswordVisible() method should toggle passwordFieldType’s value between ‘text’ and ‘password’. Have you checked the files on github? It might make it easier to check to see what you have missed 😊 github.com/theryansmee/angular-custom-form-controls/blob/version/completed-form-controls/src/app/shared/form-elements/password-input

[@TheRyanSmee]

Hopefully this all helps!

[@yassinbagane]

You are the best!

[@TheRyanSmee]

Cheers mate haha much appreciated

[@shahidabdulbaset1400]

Which VS Code extension do you use for angular field suggestion in template?

[@TheRyanSmee]

Hey, thanks for watching and commenting. In the video I’m actually using webstorm so it does this out of the box. I thought this was the same in VSCode but I just checked and it doesn’t seem to be. Sorry about that.

[@orlagh10]

hi, I use Angular Snippets v13.0.0 by John Papa extension and if gives the same suggestion. hope it helps

[@avijitghosh9472]

Really really helpful. Thanks.

[@TheRyanSmee]

Cheers for watching! I’m really glad you found it helpful 😊

[@thedextor1]

Hi Could you please let me know what are the IntelliSense plugins that you use

[@TheRyanSmee]

Hi, I use a text editor called WebStorm as my text editor and it comes with all of this stuff out of the box. It is a paid app so not ideal for everyone. I asked on my Twitter about the best Angular plugins for visual studio code and these were suggested: Must have - marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials Also nice to have - marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics Hopefully this helps 🙂

[@alessandrocinque4542]

I always get this error: Cannot invoke an object which is possibly 'undefined'. 5 Help! It seems that the "public changed: ((value: string) => void)" is deprecated because it gets detected as an error so you are forced to put a "| undefined" at the end, but then you get the above mentioned error.

[@TheRyanSmee]

Hi 👋 what version of angular is this? I assume this is due to 11/12 strict mode?

[@alessandrocinque4542]

@@TheRyanSmee it should be the most recent one because I just started to learn Angular 2 weeks ago

[@TheRyanSmee]

Ah yeah, so that’s probably the issue. I haven’t had a chance to play around with angular 12 yet sorry. It shouldn’t be too different I shouldn’t think, but I can’t help much more than that. I’m sorry 😬 I also don’t have my laptop to hand so I can’t see if there’s a quick work around. Are you part of the angular community discord? It’s deffo worth joining that people people are always happy to help on there 😊

[@OleksandrPlakhotenko]

thank you a lot!

[@emmanuelkwesimortey9831]

What theme do you use?

[@TheRyanSmee]

Hi, I the text editor is Webstorm. I use this theme plugins.jetbrains.com/plugin/12334 Thanks for watching!

[@JoseNavas]

thank you, great tutorial

[@TheRyanSmee]

Thank you! I’m really glad you enjoyed it and found it helpful 😊

[@sanjivasen]

Hi is it possible to validate on form submit?

[@TheRyanSmee]

Hi, do you mean rather than on touched/dirty. I do this sometimes by having a variable in my form component called something like hasBeenSubmitted that starts off as false and is switched to true when the submit button is clicked. Then in your validation logic, check for that as well as touched or dirty or whatever

[@sanjivasen]

@@TheRyanSmee yes.

[@sanjivasen]

I have child input component, i dont want to pass submite variable to child input component

[@nagenderg25]

Hi, How to use isDisabled in the app-input ? I tried using "@Input() public isDisabled: boolean;" decorator, but its working only for isDisable=true, The field is not getting enabled If I set it to False. Am I missing anything critical in this context? Please suggest. Thank you in advance.

[@TheRyanSmee]

Hi. In this tutorial we are using reactive forms so the disabled state should be driven from the form it's self (Disabled state is updated at the form level, and passed to the form control using ValueAccessor, triggering the `setDisabledState` method in the app-input component itself. This will then update the isDisabled variable: github.com/theryansmee/angular-custom-form-controls/blob/version/completed-form-controls/src/app/shared/form-elements/input/input.component.ts ) This means you shouldn't need to pass the disabled state using an @Input. All you should need to do is it call something like `this.myForm?.get( 'myControl' )?.disable()` or `this.myForm?.get( 'myControl' )?.enable()` from the parent form component. The only time you would need to manually pass in a controls disabled state using an @Input, would be if you were using a template driven forms (ngModel). We don't cover this technique in the tutorial because I rarely use this method as ReactiveForms are so powerful. That said, if you are using template driven forms, I think using @Inputs would be your best bet 👍 Hopefully this all makes sense? Thanks for watching and commenting 😊

[@nagenderg25]

@@TheRyanSmee Dear Ryan, Thank you so much for replying.

[@TheRyanSmee]

Don’t be silly, I’m always happy to help 😊

[@andresmauriciofajardoolaya2721]

amazing!!!, that was i looking for

[@TheRyanSmee]

Awesome, I’m really glad you found it useful 😊 thank you for watching!

[@MohamedArafath077]

Great works!.

[@TheRyanSmee]

Thanks for watching and commenting 😊

[@hbela1000]

really cool, thx.

[@TheRyanSmee]

Glad you found it useful 😊 thanks for commenting!

[@wolfisraging]

amazing video as always... though it would be better if you could zoom a little next time :)

[@wolfisraging]

forgot to tell I've subscribed already :)

[@TheRyanSmee]

Ah brilliant. Thank you for watching, commenting and subscribing! It really means a lot. I'm glad you're enjoying the content 😊

[@krishnapanigrahi6926]

what is the meaning of "formField?.dirty" ..I did not get the syntax "?."

[@TheRyanSmee]

Hi. Using `?` before a `.` is called optional chaining. It’s pretty new to javascript & typescript. It’s used as a shorthand to null check deeply nested values. E.G `if ( this.form?.get( ‘name’ )?.value )` Is the same as: ``` if ( this.form && this.form.get( ‘name’ ) && this.form.get( ‘name’ ).value ) { ``` developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[@TheRyanSmee]

So `formField?.dirty` is first checking if the form field exists and if it does is then checking to see if it’s been modified 😊 hopefully that helps

[@krishnapanigrahi6926]

Got it. Thank you.

[@richardprakash4630]

Subscribed 👍

[@TheRyanSmee]

Cheers! I’m really glad you’re finding the content useful!

[@i-heart-google7132]

Another useless tutorial on CVA. Doesn't go remotely deep enough into the topic.

[@TheRyanSmee]

It’s often a tough balancing act between teaching people everything they will need to know and bombarding them with too much information. I feel like I’ve covered most of what I use on a regular basis as an angular developer. What other stuff would you have liked to have seen?

[@i-heart-google7132]

@@TheRyanSmee you seem like a nice guy, I apologize if my comment wasn't quite 'polite'. The thing is, every tutorial on CVA demonstrates the same stuff, again, and again. I was hoping for some deeper explanation, e.g. constructor(@Self() private control: NgControl)...you get the idea. Anyway, I'll just try to investigate on my own. Good luck with your project.