Forms are the core feature of many apps. Being skilled with reactive forms should be a high priority for virtually all Angular developers. I hope this video helps solidify the core principles :)
God, I really love your videos. As a beginner Angular developer, these videos really help me out a lot. Please don't stop making such videos you don't even know how many people you help out with this :)
I once had to redo an Angular app's core form from scratch. Initially I had very fuzzy understanding of reactive forms, but the second time when I had to redo it, I had a much clearer idea, and was able to restructure it much better, however, I absolutely love watching these The Basics series because it really clears some very basic stuff that'll make you realize there's a better way. Looking forward to more of The Basics. Especially the dynamic forms.
(No sarcasm) I appreciate how your videos assume we are competent enough developers that don't need every single thing spoon fed. Thanks for your concise approach to teaching.
Got sei dank.. !!! Spent almost 4 hours to work around how i can use form builder and do validation for every field separately as i am new in Angular Development. At last your video.. was a relief !! Thanks a lot. It would be totally injustice if i dont LIKE and SUBSCRIBE. So here.. I just LIKED AND SUBSCRIBED... All the best for your future videos.
I really REALLY love the intro music, it's so relaxing for coding, please share whenever you feel relaxed and confident to do so! (no rly, share coz I'm dying for this music track)
I've been searching a solution to my problem for close to 3 weeks now. I've a problem of submitting my values in the form and as well making my email test if it's wrong with the form validation in angular material. I'm glad you made this video.. Like God sent you to send this video because of me. I'm grateful Angular Firebase.. I also look forward to my cap please 😊
Hey Jeff. Awesome tutorial of reactive form basics. Thanks for listening and keep the beginner lessons coming as this is exactly what I need. 😙☺️ Great work.
Great as always Jeff, if possible please do some more basic tutorials with firestore, specifically how to create custom query with load more button, i know you have 2 tutorials with infinite scroll, which can be used as a starting point, but it has some weird behavior if switching routes. Thanks for sharing knowledge, i learn alot from your videos.
Hi great video. I have a question about 11:07. You see I've been using angular from version 2. And I would use getters. I've changed job and had an argument with a developer and he refuses to use getters and would not allow me to do so. The thing is he told me (correctly) that angular change detection runs like a trillion (exagerating) times per second, if you are using functions it will run those everytime. I don't see harm when there is only returning a varible access (maybe I'm wrong), but if you are dong more things inside that getter might have performance issues? What you think?
Love it! I've been using a mixture of Material and Bulma but I think I will just change it all back to Material. Thanks loads for all of your work Jeff.
has a video been done on project structure? like what goes into core and shared modules and just the best practices for structuring an angular application
This is insane and has to improve. It's far to hard to handle what is a very common pattern. We should instead be describing our form once, and the goal we want to achieve, and have a form generator. This has hundreds of places where a human can make a mistake or miss some edge case.
Take a look at 4:26 min -> Why do all nested forms get updated if you just enter values into an input of one of these form groups? Worse still, both nested forms get the values of the last entered form field, overwriting each other. ...thought it would be separated by the formGroupName automatically.
this happened to me as well and most probably it is because you have both cellphone and mainline referring to the same object. In the example that follows they actually show you how to use push to create a new object on the collection.
What do you guys think of angular material? In my opinion, it's kinda annoying that you have to essentially fight against their css, sometimes requiring very specific selectors of !important. I feel like it's intended for people that just want to slap some components into their html and not adjust anything but colour and stuff... For me, I actually prefer just implementing the styling from scratch, with normal html elements, depending on how I want things to look... Maybe I'm doing something wrong though and there's a way to raise the priority of your custom css file for a component, if that's even a thing Edit: order of loading css files doesn't help, since their selectors are very specific and their style sometimes even uses !important
Thank you so much. I'm starting to work with Angular 7 and your videos about Angular have saved me tremendous amount of time. Subscribed , keep up with great contents like this!
Good work! What did you use the tap and first rxjs operators for? Can you also provide a video for a use case, where you have to use ngModel two way binding (f.ex to handle Promise rest API data calls)? Cheers Jeff!
Good catch, I was going to use tap and first for preloading data into the form, but ran out of time. I will cover that in my next pro video about "Advanced Form Techniques with Firestore"
Now I need to figure out custom validators, and why and when I need an async one I love this video. One thing...the music starts a bit too soon before it's really done and is kind of distracting.
Is there any reason to create the form in the ngOnInit life-cycle hook instead of the constructor? I ask because I've seen other tutorials where they do it in the constructor.
Damn, I was still learning Reactive forms when your reply popped up. You're really fast, Mr. Flash! Anyways, I'll be tuned in for your latest uploads. I get every thing I want to learn from your channel regarding Angular. So I'll be here only. You can consider me your loyal subject.
What is your approach on conditional/related field validation ("confirm email", or "if A is checked, only then B is required")? It's one thing I still can't find a clean solution to and end up with nasty looking custom validators and/or custom setters on component to update formgroup when inputs change
Did you ever think about making a complete angular tutorial on udemy? Because that would be great and it would help us juniors alot. Thank's in advance
I'm repeating after the video. How can I handle this error: error TS2564: Property 'myForm' has no initializer and is not definitely assigned in the constructor. ?
Great video, and also I loved how quickly you showed the code without needing to type. I know ur using VSCODE, but what plugin do you use to insert the code, snippet?
Awesome! Loved the video. Note: I get a timestamp error now with Firestore. I have to resolve it by adding in this afs.firestore.settings({ timestampsInSnapshots: true } within the constructor.
How do you break your project tree into multiple modules? I saw ng generate module but idk how you'd avoid circular imports with global services in the app module.
Hi thanks ! could you make a video about reactive forms with formgroups which are in seperate components but together form a combined formgroup. (so with basically one submit button)
How do you correctly update (reinitialize) a form array? I have to resort to remove items one by one, then push new item. This causes lots of re-renders and validation checks. const gallery = this.data.gallery.map(image => this.fb.group( ...some code )); this.form.setControl('gallery', this.fb.array(gallery)); causes issues in templates binding. Documentation recommends using removeAt, insert, push etc but those present the issues mentioned earlier.
Have you ever seen Billy Madison when he is trying to learn Spanish right before the big contest? That is how I feel watching your videos lol. I will just set it to 3/4 speed in the future.
Well done video. Sadly using Angular 15.2.6 (not AngularJS) does not pass back the values submitted on the Dialog. (Around 14 minutes and 30 seconds in your video.) * Fix found in my response to this item * All I see is object using my code when referring to the form data. The viewing of the data as changes are made works great otherwise. But I need to be able to get directly to the data. Sadly debugging, so far, will not let me look at the typescript before sending the data to my Database call which never happens due to the form data is showing up as "object" on submit.
QUESTION!!! How did you refer to age.errors directly without using the Form name? Im using Angular 4 and I can't directly access the properties of a control by using the name given in formControlName until and unless i specifically use them like this age: FormControl; and then I use age?.errors?.required etc. to the error messages. If using formBuilder I have to do it by formName?.controls?.age?.errors?.required. Is this something new to Angular 6 ?
oh..so that age.errors is actually a call to the getter that is returning this.formname.controls.age. Got it. But what if our form has 200 fields. We wont be making a getter for each one of the controls. that will messup our TS. What do you suggest in those cases. Coz most of my forms are from 40-300 input fields long.
Forms are the core feature of many apps. Being skilled with reactive forms should be a high priority for virtually all Angular developers. I hope this video helps solidify the core principles :)
Hi, do you have a complete couse of angular and firebase ? If you have please send me the link.
God, I really love your videos. As a beginner Angular developer, these videos really help me out a lot. Please don't stop making such videos you don't even know how many people you help out with this :)
Great to hear that, I really want to build a comprehensive collection of videos like this one.
@@Fireship Suup fireship Im coming from the future to say thank you!
I once had to redo an Angular app's core form from scratch. Initially I had very fuzzy understanding of reactive forms, but the second time when I had to redo it, I had a much clearer idea, and was able to restructure it much better, however, I absolutely love watching these The Basics series because it really clears some very basic stuff that'll make you realize there's a better way.
Looking forward to more of The Basics. Especially the dynamic forms.
first of all I didn't think you could cover this much in reactive forms in just 16 mins. kudos awesome video
(No sarcasm) I appreciate how your videos assume we are competent enough developers that don't need every single thing spoon fed. Thanks for your concise approach to teaching.
This is easily the most awesome coding channel that there is in youtube. Thanks a lot for your work
It's hard for me to express my thoughts in English, but I understand you. I'm glad that there are people who love these technologies like me.
Best video on Angular / Firebase / Material reactive forms out there. Great job, as always!
Got sei dank.. !!! Spent almost 4 hours to work around how i can use form builder and do validation for every field separately as i am new in Angular Development. At last your video.. was a relief !!
Thanks a lot.
It would be totally injustice if i dont LIKE and SUBSCRIBE. So here.. I just LIKED AND SUBSCRIBED...
All the best for your future videos.
is there a mini version of you to get out from a pocket whenever i need your immense knowledge? geez you are smart
And here is the video, that i was looking for: Complex Reactive Forms
I really REALLY love the intro music, it's so relaxing for coding, please share whenever you feel relaxed and confident to do so! (no rly, share coz I'm dying for this music track)
I've been searching a solution to my problem for close to 3 weeks now.
I've a problem of submitting my values in the form and as well making my email test if it's wrong with the form validation in angular material.
I'm glad you made this video.. Like God sent you to send this video because of me.
I'm grateful Angular Firebase..
I also look forward to my cap please 😊
Thank you for this comment. I've run into these issues myself and I like to share my favorite solutions.
I always have big smile when I receive notification form your channel this video is ASM...
Great to hear that :)
Simple and straight forward explanation.
Hey Jeff. Awesome tutorial of reactive form basics. Thanks for listening and keep the beginner lessons coming as this is exactly what I need. 😙☺️ Great work.
WINNER - Send me an email at hello@angularfirebase.com for your free hat :)
One of the best tutorials on reactive forms, excellent job 👍
Hi Jeff,
Thanks for sharing these useful vids. It might be a good idea to add this and the previous videos on basics to a basics playlist.
Thanks!
Thank you, yes I really need to update my playlists.
Thanks for another great video Jeff! It's great to see quality content so regularly!
I love the format of your videos. Concise, direct and very informative.
Super pact video, took me like an hour but it was worth it! Awesome tutorial
Super fast and super simple explanation. Thanks so much.
epic explanation brother! Absolutely no crap. Loved it
Very usefull information in combination with a professional presentation. 10 Points!
Well done !
Your tuts helped me to get a job as a front end developer, thank you!
Great video! Forms are essential to learn in Angular.
Needed this tutorial right now and I am glad this info is coming from you. Great presentation per usual.
Awesome work man, saved me a lot of hours reading the vast info on the NG Docs
Thanks .. as expected .. always bring a great tutorial
Great as always Jeff, if possible please do some more basic tutorials with firestore, specifically how to create custom query with load more button, i know you have 2 tutorials with infinite scroll, which can be used as a starting point, but it has some weird behavior if switching routes. Thanks for sharing knowledge, i learn alot from your videos.
Great to hear that :) My next pro video will cover Firestore with Reactive Forms, but have a ton of other Firestore stuff planned
Reactive forms, sublime choice for the second video!
WINNER - Send me an email at hello@angularfirebase.com for your free hat :)
This video is wonderful thanks for taking your time to make it
Thanks for watching, appreciate the feedback :)
Hi great video.
I have a question about 11:07.
You see I've been using angular from version 2. And I would use getters. I've changed job and had an argument with a developer and he refuses to use getters and would not allow me to do so. The thing is he told me (correctly) that angular change detection runs like a trillion (exagerating) times per second, if you are using functions it will run those everytime.
I don't see harm when there is only returning a varible access (maybe I'm wrong), but if you are dong more things inside that getter might have performance issues? What you think?
Great and informative. Keep them coming.
Very good summary!
Love it! I've been using a mixture of Material and Bulma but I think I will just change it all back to Material. Thanks loads for all of your work Jeff.
has a video been done on project structure? like what goes into core and shared modules and just the best practices for structuring an angular application
@7:49 is it phone.area or area as formcontrolname??? please help :(
Thanks. Been looking for up to date reactive forms basics.
This is insane and has to improve. It's far to hard to handle what is a very common pattern. We should instead be describing our form once, and the goal we want to achieve, and have a form generator. This has hundreds of places where a human can make a mistake or miss some edge case.
Hey fireship !
This video is great !
But what's the angular version is this ??
Take a look at 4:26 min -> Why do all nested forms get updated if you just enter values into an input of one of these form groups?
Worse still, both nested forms get the values of the last entered form field, overwriting each other.
...thought it would be separated by the formGroupName automatically.
this happened to me as well and most probably it is because you have both cellphone and mainline referring to the same object. In the example that follows they actually show you how to use push to create a new object on the collection.
What do you guys think of angular material? In my opinion, it's kinda annoying that you have to essentially fight against their css, sometimes requiring very specific selectors of !important. I feel like it's intended for people that just want to slap some components into their html and not adjust anything but colour and stuff... For me, I actually prefer just implementing the styling from scratch, with normal html elements, depending on how I want things to look... Maybe I'm doing something wrong though and there's a way to raise the priority of your custom css file for a component, if that's even a thing
Edit: order of loading css files doesn't help, since their selectors are very specific and their style sometimes even uses !important
Thank you so much. I'm starting to work with Angular 7 and your videos about Angular have saved me tremendous amount of time. Subscribed , keep up with great contents like this!
Hi
Thank you very much.
What's Angular icon theme you are using ? Please let me know. Thanks
Good work! What did you use the tap and first rxjs operators for? Can you also provide a video for a use case, where you have to use ngModel two way binding (f.ex to handle Promise rest API data calls)? Cheers Jeff!
Good catch, I was going to use tap and first for preloading data into the form, but ran out of time. I will cover that in my next pro video about "Advanced Form Techniques with Firestore"
Good video = short and clear. Thanks!
It helped me a lot. Thanks!
Now I need to figure out custom validators, and why and when I need an async one
I love this video. One thing...the music starts a bit too soon before it's really done and is kind of distracting.
Awesome video as always, Might be nice to cover ControlValueAccessor in Angular forms.
Is there any reason to create the form in the ngOnInit life-cycle hook instead of the constructor? I ask because I've seen other tutorials where they do it in the constructor.
I think this video become a good reference for beginner 👍🏻
Thanks a ton for sharing this useful learning material.
Can you show an example where the nested form is a complex custom component with its own form?
I figured it out with some help. here is an example: github.com/psotos/AngularFormContainerProblem
When you show us the nested forms, then editing the cellphone also edits the homephone datamodel and vice versa... How to fix that?
my problem exactly
Any tips on how to effectively create getters for forms?
Just what I needed! Thanks!
Nice! Forms are critical for many
Thanks ! This helped me so much.
a beautiful explanation 😀
Just love the work you are doing!!
Awesome content! It really helped me, thanks!
I really dig your content, and I genuinely find your spot to be an awesome place to learn. Though this comment is merely for the hat!
Thanks, a little late for the hat tho. Check out the latest video on the channel for a chance to win some swag :)
Damn, I was still learning Reactive forms when your reply popped up.
You're really fast, Mr. Flash!
Anyways, I'll be tuned in for your latest uploads. I get every thing I want to learn from your channel regarding Angular. So I'll be here only. You can consider me your loyal subject.
What is your approach on conditional/related field validation ("confirm email", or "if A is checked, only then B is required")? It's one thing I still can't find a clean solution to and end up with nasty looking custom validators and/or custom setters on component to update formgroup when inputs change
Did you ever think about making a complete angular tutorial on udemy? Because that would be great and it would help us juniors alot. Thank's in advance
Great video, keep it up!
Just awesome.. very helpful
Where should I be using the template driven forms ? Is the reactive forms always the better one to use ?
Template forms are useful for very small forms that don't need validation bc they are easy to setup. Anything beyond simple should be reactive IMO.
I'm repeating after the video. How can I handle this error:
error TS2564: Property 'myForm' has no initializer and is not definitely assigned in the constructor. ?
Thanks dude, you making good videos. It would help for most of the beginners, cheers :)
Great video, and also I loved how quickly you showed the code without needing to type. I know ur using VSCODE, but what plugin do you use to insert the code, snippet?
Wish you had some plunked or fiddle examples thanks for the explanation
Awesome! Loved the video. Note: I get a timestamp error now with Firestore. I have to resolve it by adding in this afs.firestore.settings({ timestampsInSnapshots: true } within the constructor.
How can I make sure that the validator is not taking effect until i click off of the input feild?
Thanks for ur video. Very helpful.
Keep it up and thanks for the great content
Thank you for your videos. There are very informative. And, good luck:)
I am using angular for two years but never used a nested forms... :))
You're a lucky one then ;)
Don't think so... Combining multiple independent forms is an overkill compare to nested solution :D
How do you break your project tree into multiple modules? I saw ng generate module but idk how you'd avoid circular imports with global services in the app module.
Hi thanks ! could you make a video about reactive forms with formgroups which are in seperate components but together form a combined formgroup. (so with basically one submit button)
Maybe I could put together a snippet. They need to share the same parent formGroup, so you would pass them around with `@Input` or a shared service.
I think '@Input() formGroup' gives trouble with OnPush changedetection though. I'm still figuring out what is the best way to do it.
great work as always, keep it up.
Awesome video! What's the difference between cloud firestore and firebase real-time database?
How do you correctly update (reinitialize) a form array?
I have to resort to remove items one by one, then push new item. This causes lots of re-renders and validation checks.
const gallery = this.data.gallery.map(image => this.fb.group( ...some code ));
this.form.setControl('gallery', this.fb.array(gallery));
causes issues in templates binding. Documentation recommends using removeAt, insert, push etc but those present the issues mentioned earlier.
Thank you for the great job man
Much needed this video
what is the benefit of angular material compared to regular NgForm??
Great stuff! I was looking for this.
Which font do you use?
what theme do you use here?
Superb content!
Have you ever seen Billy Madison when he is trying to learn Spanish right before the big contest? That is how I feel watching your videos lol. I will just set it to 3/4 speed in the future.
Which Linux distribution and desktop environment are you using?
Your tutorials are amazing. And I am not just saying that because of a free hat. They really are. #IdoWantAHatThough
WINNER - Send me an email at hello@angularfirebase.com for your free hat :)
Awesome as always🤗
Hello, How can I buy this complete Kurs ?
Is it possible to tie out to a Typescript definition in the formbuilder?
It's not directly possible currently, but there is a PR out for it github.com/angular/angular/pull/20040
Very useful. Thanks so much
Well done video.
Sadly using Angular 15.2.6 (not AngularJS) does not pass back the values submitted on the Dialog. (Around 14 minutes and 30 seconds in your video.) * Fix found in my response to this item *
All I see is object using my code when referring to the form data. The viewing of the data as changes are made works great otherwise. But I need to be able to get directly to the data. Sadly debugging, so far, will not let me look at the typescript before sending the data to my Database call which never happens due to the form data is showing up as "object" on submit.
Is possible to apply number pipe for formcontrolname?.if yes please help me ,how to achieve the same
Great video, thanks.
+Maria thanks for watching :)
QUESTION!!!
How did you refer to age.errors directly without using the Form name?
Im using Angular 4 and I can't directly access the properties of a control by using the name given in formControlName until and unless i specifically use them like this
age: FormControl;
and then I use age?.errors?.required etc. to the error messages. If using formBuilder I have to do it by
formName?.controls?.age?.errors?.required. Is this something new to Angular 6 ?
Watch the part at 11:01 where I set up getters. That's how you get the cleaner HTML
oh..so that age.errors is actually a call to the getter that is returning this.formname.controls.age.
Got it. But what if our form has 200 fields. We wont be making a getter for each one of the controls. that will messup our TS. What do you suggest in those cases. Coz most of my forms are from 40-300 input fields long.