Reactive Forms - The Basics
HTML-код
- Опубликовано: 5 сен 2024
- Master the basics of Angular 6 reactive forms. In this episode, we build out form examples that solve common challenges like nesting, validation, persistence, and more. angularfirebas...
- Reactive Forms Docs angular.io/gui...
- Angular CLI Basics angularfirebas...
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!
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.
And here is the video, that i was looking for: Complex Reactive Forms
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.
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 :)
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
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)
Simple and straight forward explanation.
I always have big smile when I receive notification form your channel this video is ASM...
Great to hear that :)
One of the best tutorials on reactive forms, excellent job 👍
Thanks for another great video Jeff! It's great to see quality content so regularly!
Super fast and super simple explanation. Thanks so much.
Well done !
Your tuts helped me to get a job as a front end developer, thank you!
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
I love the format of your videos. Concise, direct and very informative.
Reactive forms, sublime choice for the second video!
WINNER - Send me an email at hello@angularfirebase.com for your free hat :)
Thanks .. as expected .. always bring a great tutorial
Very usefull information in combination with a professional presentation. 10 Points!
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!
Great video! Forms are essential to learn in Angular.
Super pact video, took me like an hour but it was worth it! Awesome tutorial
Very good summary!
epic explanation brother! Absolutely no crap. Loved it
This video is wonderful thanks for taking your time to make it
Thanks for watching, appreciate the feedback :)
Thanks. Been looking for up to date reactive forms basics.
Needed this tutorial right now and I am glad this info is coming from you. Great presentation per usual.
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.
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.
Awesome work man, saved me a lot of hours reading the vast info on the NG Docs
It helped me a lot. Thanks!
Just awesome.. very helpful
Awesome video as always, Might be nice to cover ControlValueAccessor in Angular forms.
a beautiful explanation 😀
Thanks again! Just what I needed
Good video = short and clear. Thanks!
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 ??
Thanks a ton for sharing this useful learning material.
Thanks ! This helped me so much.
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
Wish you had some plunked or fiddle examples thanks for the explanation
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.
Great and informative. Keep them coming.
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"
I think this video become a good reference for beginner 👍🏻
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
Any tips on how to effectively create getters for forms?
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
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.
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?
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 for ur video. Very helpful.
Thank you for the great job man
Hi
Thank you very much.
What's Angular icon theme you are using ? Please let me know. Thanks
Great video, thanks.
+Maria thanks for watching :)
Great video, keep it up!
Just love the work you are doing!!
Keep it up and thanks for the great content
Awesome content! It really helped me, thanks!
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
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 :)
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.
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
Much needed this video
Thanks dude, you making good videos. It would help for most of the beginners, cheers :)
Very useful. Thanks so much
Thank you for your videos. There are very informative. And, good luck:)
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.
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.
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
Awesome video! What's the difference between cloud firestore and firebase real-time database?
Great stuff! I was looking for this.
How can I make sure that the validator is not taking effect until i click off of the input feild?
High quality video again.
Thank you Svein!
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.
you are doing great!! keep up the good work
Excellent video, however it lacks the password confirmation
Great learning
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
Thanks a bunch for this video! it was super helpful :3
simple and clean explanation xd
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.
what is the benefit of angular material compared to regular NgForm??
Superb content!
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.
Great video, thanks a lot!
Thanks for awesome content.
Thanks man,
Thank you. It's hard work, but fun!
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.
Does angular/firebase still holds it value in 2022?
Helpful ❤
aah much needed video! Thanks