Angular 10 Tutorial #60 - Reactive Forms - FormGroup, FormControl For Beginners| Angular 10 Tutorial

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners we are continuing to learn about reactive forms today we will learn about two very important aspects of reactive forms which is form control and form group these are two classes that are absolutely essential for building reactive forms we'll learn all about it we'll also do some hands-on to get you started with reactive forms this is part 60 of the angular 10 complete tutorial playlist i have planned around 100 tutorials and we are reaching the 60 uh videos now 40 more to go so make sure you check out the playlist link so far so you learn everything that i've covered so far in angular to help you learn and master angular following are the topics that you would see that i have already covered in the previously in the series so make sure you check it out if you have any doubts please do drop them in the comment section i'll be happy to help you last episode i introduced you to the concept of reactive forms today we will learn about form control form group and we will also start with our hands-on building of the reactive forms all right a quick note for our viewers who are joining us new what are reactive forms reactive forms are a way to build angular forms just like template driven forms they are different uh by design like how we design uh how we how we lay out the form and its attributes and its elements itself right so that is the difference in how we lay out it how we design the form reactive forms are extremely powerful extremely helpful in writing complex forms custom logic custom validation error handling much much more you will learn step by step how to learn in today's episode but before we do remember these three things in reactive forms nobody tells you this these are the three basic core things form control form group form builder right just remember these three words i will explain it to you as we progress i will make it absolutely clear to you now what we are going to do we are going to do a hands-on example and we will learn by doing practical okay we will do that in five simple steps okay step number one we have to import reactive forms module in the app module because i have it only app module you will import forms module wherever you create a module right if you create a module in a let's say let me give you an example with it right so let's say if you create we have app module here and if you let's say create um say you create a module called users module and you have a say add user like you have a component here now if you want to use reactive form here in this component you need to import the reactive forms module in this module which is users module some people what they do they will add it here and then it will give error because it doesn't know it's not in this module so that's why you need to import it into the module you're working with right remember this this is common mistake number one okay now as we progress i'll give you more places or ideas where you will go wrong and my idea is only to help you so that you don't make those mistakes step number two is to create the form right so for that we need two things form group form control name that's the two important things you will work with form right let's let me cover that quickly for you now whenever we talk about say reactive forms right now you have something called form now form will have some elements right now what are the elements these are nothing but like say input checkbox text area buttons check box radio any form element right any form element these are the elements right these are the common elements we use now you can have drop down you can have select anything image right so don't just go by this list all i'm saying is um that anything that we use to input the data in forms html html forms right those are all part of the form so this is what we call them as elements in the form this is a form these are the elements now remember in reactive forms we will design a form and each of these elements we refer to them as form controls right form controls now when you club these form controls together what you get is a form group once again let's go over this understand the concept if you understand this everything becomes easy usually you will have a form you will have some elements now what are the elements it could be input type text check text area button check box radio select drop down options right these are all the different elements that can make up a form in reactive forms we call these elements each is a each element is a form control right all not one each now remember that is also important each one you will refer to as form control right all of this club together one or more right when one or more form controls are grouped together why not one or more form control are grouped together we call it form group that is this right understand this logic because right now what you're going to see is same thing okay now let's get started with that and in the ui in the ui will refer to them as form and each element will be referred to as form control name right i'll show you that now in just a bit just remember this concept okay let's start building now okay so let's get started so what i'm going to do is i'm going to take a say loan types right it doesn't have any it's an empty component i'm doing it from scratch so that you learn it okay now let me show you this here so what i'm going to do first thing okay first i'm going to work in my component okay and let's get started so what i'm going to say i'm going to define a form i'm going to say add loan type form you can give any name again this is something that i am this will be a form group why because i'm going to club more one or more form controls to to to this group so i have created a form now i'm saying in this form this is a new form group right and i'm going to say in this i'm going to have some elements or i can say form controls so i'm going to say loan name is one of them and i'm going to say it's a new form control right similarly i'm going to add one more to it i'm going to say loan description and i'm going to say new form control right so what i've done i have created a simple form this is a form using form group and i'm telling this form group is made up of two elements or i can say two form controls one is loan name one is loan description you don't have to say it what type it is right away okay we will say that now in the html so here we will define the form and now we are going to say what type it is this is of type form group equal to what is the name that we have given same name here and copy it here right so now you are telling that it's a form group right and what is the name that we have given it's the same one that we mentioned it in our component here now go back to html and now let's add some input element it can be anything and now this is important look here we designed a form control we will give here form control name equal to same name that we gave here loan name okay let's build a text area and again control name equal to same again take this field so this becomes like two elements now we have a form which has two elements i am going to quickly throw in a button just to capture the value i'll say add loan type right now we forgot the most important part this is part of the app module right so i have to go to the forms module and add reactive forms module okay so i added it here now it has imported it here right now it is good okay now i know that it should work without any issues let's see let's start the server application i hope it makes sense i hope i have taken the most simplest basic example for you so that you don't get any type of queries or confusion of how to start learning reactive forms create a form group right in the form group create the controllers controls which is nothing but form elements like loan name description etc we see some error let's see what it says okay the method is not defined already so let's do that take this add loan type and create a new method here and all i'm going to do is just do a console log of the value you will see how simple it is to create a form right okay it's compiling let's give it all right in the meanwhile while it's compiling please do consider hitting that subscribe button like button if you're enjoying please keep your positive comments coming i really love reading them also it gives me lot of satisfaction to the work and effort that i'm putting in sharing my knowledge with you thank you so much in advance all right so it's building up um once this is done we should see our reactive form in action if you thought reactive forms were complex were scared you thought it was tough now you would see that in less than five eight ten minutes you have learned how to build your own form and that's amazing so now we are going to say loan types so see our form comes up right let's open the console clear it and i'm going to type some value right and hit add loan type and it gives me the value you might be wondering right that it's just as simple as a template driven form of course it is just as simple as template driven form now you have the control how you want to play with this particular form because we can add custom validation custom grouping logic etc right you want more fields just go for it add more let's say loan type right new form control right so add one more field this is your homework give it a try right so all you have to do is copy one more and say loan type here that's it you're done you added one more field right away see now you can add some labels here you can put some form group now design the form better that's again your homework right loan name loan type loan description right so see loan name loan type loan description clear the console enter some details and like now you will see three values coming up right loan description loan name loan type as simple as that see now in less than you know such few lines of code and you are able to build a powerful form why is it powerful we are going to learn about adding through a form builder we will add a lot of validations i will add lot of form elements to help you guide through different types of forms i know a lot of you have been asking me today in the example one we did basic form i call this a very very basic form because it just has some input elements and or let me be very specific because i want to cover this topic in detail for you input type text and i covered text area right in the next episode we will keep adding complexity to this form right we will add um we will use form builder also right along with that i will add input type radio input type check box and so we will slowly start adding uh you know uh complexity to it we will add maybe file upload email image upload down the line we will use select check box right we will use add up so this is again dynamic uh elements right that's the most favorite part we can add new form controls we will use we'll remove form controls we will also do complex forms with something like arrays right and much much more so stay with me stay the course and drop in comments drop in your questions i'm here to help you today we covered the very very basic form where we learned about how to create a form group add new controls to it and just use that form in our template and capture the details via form click we'll also add validations we'll add custom error handling etc much much more it's going to be really fun don't be scared stay with me learn step by step you will be a master very soon in reactive forms that being said uh these are the notes make sure that you get it um so this is what i have just done uh form builder is something that i'm going to do in the next episode for you but today we did um ng form group and form control right in the next episode i will cover in detail about form builder that's the next step today you learnt about reactive form form group form control next episode you will learn from builder then we will add validation much much more stay with me let me know if you have any questions i am here to help you please do consider subscribing to my channel liking the video sharing these tutorials with your friends and colleagues if you also like my work please do consider buying me a coffee at buy me a coffee.com slash our tutorials thank you so much in advance

Channel: ARC Tutorials

Views: 7,193

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, reactive forms example angular, angular reactive form

Id: eTZC14uoSj0

Length: 16min 44sec (1004 seconds)

Published: Sun Feb 21 2021