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.
@rembautimes88083 жыл бұрын
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.
@TheRyanSmee3 жыл бұрын
Thank you! I really appreciate the positive feedback 😊 I’m glad you found it useful
@MuhammadUmar-y9bКүн бұрын
@@TheRyanSmee how can we do this same input form element with template driven forms ?
@CCPony3 жыл бұрын
You, my friend, are an EXCELLENT presenter. I'm going to be watching for you.
@TheRyanSmee3 жыл бұрын
Cheers mate, I really appreciate that! Hopefully you find the content useful😊
@metalllus4 жыл бұрын
great great work as always, I haven't seen this discussed anywhere!
@TheRyanSmee4 жыл бұрын
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_2 жыл бұрын
Appreciated, It helps a lot to get details about the Control value Accessor, Thanks.
@TheRyanSmee2 жыл бұрын
Yeah it’s a super powerful feature that I think is often overlooked. Cheers for watching and commenting
@luizandreluz16352 жыл бұрын
Thank you Ryan, really helped me, cheers from Brazil!
@TheRyanSmee2 жыл бұрын
Brilliant, I’m really glad to hear! Thank you for watching and commenting 🙌
@andyhb19704 ай бұрын
Great tutorial, thanks for taking the time to do it!
@saikumardesu17002 жыл бұрын
The most appropriate one, I was looking for. Thank you very much for the nice presentation.
@TheRyanSmee2 жыл бұрын
Thank you! I’m glad you found it useful 😊
@nudigitalvibe3 жыл бұрын
I had to even like the video before even finishing it. This is good stuff.
@TheRyanSmee3 жыл бұрын
Thank you for the kind words! I’m really glad you found it useful 🙂
@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.
@sagar-vispute2 жыл бұрын
Buddy, you are amazing, thanks for sharing this wonderful knowledge to us
@TheRyanSmee2 жыл бұрын
Thank you for watching - I’m really glad you found it useful! 😊
@GiorgiNatenadze-v1s3 жыл бұрын
You are a genious mr Ryan ! Thanks a lot ! You helped me much !
@TheRyanSmee3 жыл бұрын
Thank you so much for watching and commenting. I’m really glad I could help 👍
@Billy_Herrington__3 жыл бұрын
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
@honghanlim38592 жыл бұрын
This video is amazing. Just the content I needed. Thanks!
@TheRyanSmee2 жыл бұрын
Thanks, I really glad you found it helpful 😊
@fattahkartish94282 жыл бұрын
Amazing..thanks a lot for this video and for sharing your knowledge, subscribed! What theme you are using?
@syedsuhaibzia15583 жыл бұрын
amazing explanation and so so so easy to do it bcoz of his beautiful explanation
@TheRyanSmee3 жыл бұрын
Thanks for watching and commenting! I’m super glad you found it helpful 😊 your comment is really kind, thanks!
@amandasimonds9 Жыл бұрын
thank god for good teachers like you. you got a like and subscribe from me. thank you!!
@TatharVardamir2 жыл бұрын
muchas gracias por el contenido!😁
@TheRyanSmee2 жыл бұрын
De nada! 😊
@jeffl65713 жыл бұрын
Amazing explanation! Thanks!
@TheRyanSmee3 жыл бұрын
Thanks mate! Really glad you enjoyed it 😊
@javidg41973 жыл бұрын
Absolute beauty.. it would be even more good if we can see it for Date and Dropdown .
@TheRyanSmee3 жыл бұрын
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 😊
@thalysonevilasiobrandao65724 ай бұрын
Would it be a bad practice to get the parent form by using the FormGroupDirective instead of passing it as an input parameter?
@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.
@edems131 Жыл бұрын
Awsome video
@TheRyanSmee Жыл бұрын
Thank you! I'm glad you found it useful
@mousikeanurag75192 жыл бұрын
Thanks, but why it is not working when i use it as in angular element ?
@pgc17214 жыл бұрын
Hi, Thank you very much for posting this advanced stuff. Could you please tell me where is defined?
@TheRyanSmee4 жыл бұрын
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
@pgc17214 жыл бұрын
@@TheRyanSmee Thank you so much for replying Mr. Ryan. I really appreciate your work. Wish you a very happy new year. Cheers :-)
@TheRyanSmee4 жыл бұрын
No worries, I’m always happy to help. Thank you for watching videos and commenting. Happy new year to you too!
@bug184863 жыл бұрын
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.
@TheRyanSmee3 жыл бұрын
Sorry for the late reply. I must have missed the notification. Do you still need help with this?
@TheRyanSmee3 жыл бұрын
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
@TheRyanSmee3 жыл бұрын
Hopefully this all helps!
@naimeahmed11923 жыл бұрын
Thank you very much sir. I like the idea very much.
@TheRyanSmee3 жыл бұрын
Thank you! I’m really glad you found this video useful 😊
@avijitghosh94722 жыл бұрын
Really really helpful. Thanks.
@TheRyanSmee2 жыл бұрын
Cheers for watching! I’m really glad you found it helpful 😊
@shahidabdulbaset14003 жыл бұрын
Which VS Code extension do you use for angular field suggestion in template?
@TheRyanSmee3 жыл бұрын
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.
@orlagh102 жыл бұрын
hi, I use Angular Snippets v13.0.0 by John Papa extension and if gives the same suggestion. hope it helps
@carlesalbertnavedapallares12722 жыл бұрын
Great video and very useful! Thnks :)
@user-rp9iis1en6h2 жыл бұрын
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"?
@alessandrocinque45423 жыл бұрын
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.
@TheRyanSmee3 жыл бұрын
Hi 👋 what version of angular is this? I assume this is due to 11/12 strict mode?
@alessandrocinque45423 жыл бұрын
@@TheRyanSmee it should be the most recent one because I just started to learn Angular 2 weeks ago
@TheRyanSmee3 жыл бұрын
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 😊
@thedextor13 жыл бұрын
Hi Could you please let me know what are the IntelliSense plugins that you use
@TheRyanSmee3 жыл бұрын
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 🙂
@JoseNavas3 жыл бұрын
thank you, great tutorial
@TheRyanSmee3 жыл бұрын
Thank you! I’m really glad you enjoyed it and found it helpful 😊
@emmanuelkwesimortey98312 жыл бұрын
What theme do you use?
@TheRyanSmee2 жыл бұрын
Hi, I the text editor is Webstorm. I use this theme plugins.jetbrains.com/plugin/12334 Thanks for watching!
@sanjivasen2 жыл бұрын
Hi is it possible to validate on form submit?
@TheRyanSmee2 жыл бұрын
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
@sanjivasen2 жыл бұрын
@@TheRyanSmee yes.
@sanjivasen2 жыл бұрын
I have child input component, i dont want to pass submite variable to child input component
@OleksandrPlakhotenko Жыл бұрын
thank you a lot!
@yassinbagane9 ай бұрын
You are the best!
@TheRyanSmee9 ай бұрын
Cheers mate haha much appreciated
@nagenderg254 жыл бұрын
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.
@TheRyanSmee4 жыл бұрын
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 😊
@nagenderg254 жыл бұрын
@@TheRyanSmee Dear Ryan, Thank you so much for replying.
@TheRyanSmee4 жыл бұрын
Don’t be silly, I’m always happy to help 😊
@andresmauriciofajardoolaya27213 жыл бұрын
amazing!!!, that was i looking for
@TheRyanSmee3 жыл бұрын
Awesome, I’m really glad you found it useful 😊 thank you for watching!
@krishnapanigrahi69264 жыл бұрын
what is the meaning of "formField?.dirty" ..I did not get the syntax "?."
@TheRyanSmee4 жыл бұрын
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
@TheRyanSmee4 жыл бұрын
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
@krishnapanigrahi69264 жыл бұрын
Got it. Thank you.
@MohamedArafath0774 жыл бұрын
Great works!.
@TheRyanSmee4 жыл бұрын
Thanks for watching and commenting 😊
@hbela10003 жыл бұрын
really cool, thx.
@TheRyanSmee3 жыл бұрын
Glad you found it useful 😊 thanks for commenting!
@wolfisraging3 жыл бұрын
amazing video as always... though it would be better if you could zoom a little next time :)
@wolfisraging3 жыл бұрын
forgot to tell I've subscribed already :)
@TheRyanSmee3 жыл бұрын
Ah brilliant. Thank you for watching, commenting and subscribing! It really means a lot. I'm glad you're enjoying the content 😊
@richardprakash46303 жыл бұрын
Subscribed 👍
@TheRyanSmee3 жыл бұрын
Cheers! I’m really glad you’re finding the content useful!
@i-heart-google71323 жыл бұрын
Another useless tutorial on CVA. Doesn't go remotely deep enough into the topic.
@TheRyanSmee3 жыл бұрын
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-google71323 жыл бұрын
@@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.