Thank you for the kind words. I’m really glad you are enjoying the content. My plan is to come back and keep making videos. I’ve just been really busy with work. Hopefully I’ll be able to finish some new ones soon 😊
Good spot! Tbf I used `!form.valid` for a really long time until someone I work with pointed out `form.invalid` to me. I’m not really sure why I reverted back in this video 😂 😬 but I really wish I had of spotted that in editing so I could have put a note on the screen or something haha.
Like your videos especially the witty lines . With forms being part of our life , good form design is like fine craftsmanship and tutorials like yours help us along. Stay safe and thanks for your excellent content
Thank you for watching and commenting. I honestly really appreciate the love! I always said i'd find time to start making videos once I hit 1K, so looks like i'm back! haha
@@TheRyanSmee I loved it man...I'm struggling to build a child form with dynamic array for the checkbox and quantity for each, and I think this will help me solve the problem
getting this error while passing data in childForm after looping. Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.
I got the error like below: error TS2339: Property 'controls' does not exist on type 'AbstractControl'. Instead of this: I changed to this: It resolved my problem. Hope it can help you out.
Excellent tutorial that I am looking for a couple of days. But one more question, when I followed your video, the below line cannot compile. this.userContactForm = new FormGroup( controls: {
As to me, bit over-engineered. There is no need for separating out static method in to the child component. This method is not actually used by the child component and its result is being circled back by Input(). I'd say, using static method is a red flag that service or util pure function should be used instead. The idea of nested form groups is actually pretty simple - create all forms wth form builder and pass them down to the child component. Otherwise, pretty cool example of using reactive form, inputs and outputs. Thanks!
If you don't import ReactiveFormsModule in your components in Angular 17 you will get several errors, so if you have errors make sure you are importing it. Took me a while to figure it out as errors where not pointing to that.
No they should work in the same way. You can either have the form array at the parent level with inputs nested below like in this video. Or you would even house a form array in the child component and the value that is passed up to your parent through the value accessor is an array. Does that make sense?
Complicating file structure defeats the purpose of the video. Keeping it simple is the way to go. Imagine someone new to angular trying to follow your angular nested forms tutorial, i mean someone who never heard about clean code.
Hi 👋 Thank you for watching my video and commenting, but I’m afraid I’ll have to disagree. This is not a beginner tutorial for people who have never written angular before. It’s for people who work with medium to large angular projects and are looking to write good, reusable code that scales well. If a developer has never heard of writing “clean code”, the best thing we can do as leaders in to inform them off it’s importance. In my experience, when working with a larger code base, the organisation of your code is as important as the code itself. I hope this all makes sense 👍
@@TheRyanSmee but title is not about clean code, and its not saying not for beginners, also nesting forms its not for large code base . im just giving you a feedback on why i skipped the video,
*ngFor="let childForm of userContactForm.get('contacts').controls " red line under "controls" error : Property 'controls' does not exist on type 'AbstractControl'.ngtsc(2339) What is the issue do you think?
Hi, first of all, thanks for watching! 😊 I’ve actually got another video on doing exactly that - ruclips.net/video/xTcJQaWiJ2c/видео.html For me, I think control value accessors are better for making a single form control. So if I wanted to make a password input with a show side toggle, that’s when I’d use an value accessor
@@rr3861 yeah as you say I think either could work and they both would do a pretty good job it’s probably more down to which one you feel works best for the specific use case
Amazing explanation. You almost covered everything about Reactive form in less than 30 mins. Well done. 👍👍
Thank you! I’m really glad you enjoyed it😊👍
This is great! Please continue making similar tutorials since RUclips is really lacking quality Angular tuts. :)
Thank you for the kind words. I’m really glad you are enjoying the content.
My plan is to come back and keep making videos. I’ve just been really busy with work. Hopefully I’ll be able to finish some new ones soon 😊
Nice. For disabling if a form is invalid, I prefer to avoid the double negative and use [disabled]="form.invalid"
Good spot! Tbf I used `!form.valid` for a really long time until someone I work with pointed out `form.invalid` to me. I’m not really sure why I reverted back in this video 😂
😬 but I really wish I had of spotted that in editing so I could have put a note on the screen or something haha.
Like your videos especially the witty lines . With forms being part of our life , good form design is like fine craftsmanship and tutorials like yours help us along. Stay safe and thanks for your excellent content
Thank you for your kind words. I’m really glad you enjoyed this video 😊
Damn... You are the best tutorial guy I have ever watched. Thank you so much!!!
Please man, teach us! I'll buy any course you make, even testing lol
Thank you for watching and commenting. I honestly really appreciate the love! I always said i'd find time to start making videos once I hit 1K, so looks like i'm back! haha
Thanks for your video, It helps me a lot to understand form Array implementation. waiting more Angular videos.
Excellent tutorial. Very similar to what I need for my own project. I am so glad I found your content.
This is awesome , please make more complex reactive forms and common validation handling ways , keep rocking
Cheers! I’m really glad you enjoyed it 😊
Why dint I see this video for last 2 days ... this is great.. thank you
Thank you for watching and your comment 😊 I’m really glad you found it useful!
Hey! Thanks for your video! Really good explanation. Easy to listen you
Excellent video man, congrats!
Another good Angular channel worth subscribe after Dmitro's one, thank tou for providing a good tutorial, Much appreciated 👍
Thank you! I’m really glad you found it useful 😊
@@TheRyanSmee Do you plan to update your playlist, looks like you didn't update them often.
@@radvilardian740 - yeah I do plan to start making more content. It’s just been a really busy 6 months.
@@TheRyanSmee Nice to know that.
Excellent tutorial !
Thank you for watching! I'm really glad you found it useful! 😊
Thank you so much for this tutorial. exactly what I was looking for (Y)
Cheers 😊 I’m really glad you enjoyed it
That was actually an amazing video mate! Keep it up!
Cheers mate, I’m really glad you enjoyed it! 😊
@@TheRyanSmee I loved it man...I'm struggling to build a child form with dynamic array for the checkbox and quantity for each, and I think this will help me solve the problem
I’m really glad! Hopefully you get it sorted 😊
Nice tutorial. Please do tutorials on Router Guards and Angular Security.
Hey, really glad you enjoyed it. Ok cool, I’ll add it to my list of videos to do this year.
Cheers for watching and thanks for commenting!
Thank you for the great tutorial. I can use your technique refectory my code 😁
Thank you for watching and commenting. I’m glad you found it useful 😊
getting this error while passing data in childForm after looping.
Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.
I got the error like below:
error TS2339: Property 'controls' does not exist on type 'AbstractControl'.
Instead of this:
I changed to this:
It resolved my problem. Hope it can help you out.
try: [childForm]="$any(childForm)"
Excellent tutorial that I am looking for a couple of days. But one more question, when I followed your video, the below line cannot compile.
this.userContactForm = new FormGroup( controls: {
Sorry for the delay. I've seen a few comments like this - What version of Angular are you using?
why not implement ControlValueAccessor?
Hi how would you implement this in an edit scenario?
Hi! Should I use .hasError('required') or .errors?.['required']?
I can’t think of any reason why both wouldn’t work, but I think I’d likely go with .hasError(‘required’)
Thank you!
Thank you for watching! I’m glad you enjoyed it 😊
As to me, bit over-engineered.
There is no need for separating out static method in to the child component. This method is not actually used by the child component and its result is being circled back by Input(). I'd say, using static method is a red flag that service or util pure function should be used instead.
The idea of nested form groups is actually pretty simple - create all forms wth form builder and pass them down to the child component.
Otherwise, pretty cool example of using reactive form, inputs and outputs. Thanks!
fantabulous :-D
Subscribed too :-)
Really glad you enjoyed it! And thank you so much for the sub 🙏
exactly what i want
I’m really glad you found it useful 😊
If you don't import ReactiveFormsModule in your components in Angular 17 you will get several errors, so if you have errors make sure you are importing it. Took me a while to figure it out as errors where not pointing to that.
Lovely
Which editor used in this project
Hi. I am using WebStorm with the Gradianto theme. Thanks for watching 😊
@@TheRyanSmee thanks and can i appy this code on vs code editor
Thanks a lot for upload this forms🤗In this form nested reactive form and form array this two concepts are same or different?
No they should work in the same way. You can either have the form array at the parent level with inputs nested below like in this video. Or you would even house a form array in the child component and the value that is passed up to your parent through the value accessor is an array.
Does that make sense?
@@poojar.4184 yeah 100%. I use Webstorm because I’m used to it but my colleagues do the same job with vscode 😊
nested array ??? (array inside array
)
understood nothing. =(
Complicating file structure defeats the purpose of the video. Keeping it simple is the way to go. Imagine someone new to angular trying to follow your angular nested forms tutorial, i mean someone who never heard about clean code.
Hi 👋 Thank you for watching my video and commenting, but I’m afraid I’ll have to disagree. This is not a beginner tutorial for people who have never written angular before. It’s for people who work with medium to large angular projects and are looking to write good, reusable code that scales well.
If a developer has never heard of writing “clean code”, the best thing we can do as leaders in to inform them off it’s importance.
In my experience, when working with a larger code base, the organisation of your code is as important as the code itself.
I hope this all makes sense 👍
@@TheRyanSmee but title is not about clean code, and its not saying not for beginners, also nesting forms its not for large code base . im just giving you a feedback on why i skipped the video,
*ngFor="let childForm of userContactForm.get('contacts').controls " red line under "controls" error : Property 'controls' does not exist on type 'AbstractControl'.ngtsc(2339)
What is the issue do you think?
What version of angular are you using?
Have you tried ``?
why not use ControlValueAccessor?
Hi, first of all, thanks for watching! 😊
I’ve actually got another video on doing exactly that - ruclips.net/video/xTcJQaWiJ2c/видео.html
For me, I think control value accessors are better for making a single form control. So if I wanted to make a password input with a show side toggle, that’s when I’d use an value accessor
@@TheRyanSmee it's looks good, its probably more hassle with CVA. I think you don't need to cast in that case (I May be wrong)
@@rr3861 yeah as you say I think either could work and they both would do a pretty good job it’s probably more down to which one you feel works best for the specific use case