Angular 9 Tutorial For Beginners #44- Reactive Forms

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn about reactive forms in angular what are reactive forms how are they different from template driven forms how do we implement them we'll do some hands-on examples so at the end of this tutorial you will be able to design develop reactive forms in your angular applications welcome back my name is shredder I bring over 10 years of experience as a full-stack developer and I'm here to share my knowledge on modern web technologies I'm also here to learn from you halt so during the course of this tutorial series if you have any doubts any queries on the code samples or explanations that we discussed please feel free to ask me in the comment section below I will be happy to help you for free I'm putting in a lot of hard work in bringing these tutorials to you so I will really appreciate if you can like the video and subscribe to my channel thank you in advance a lot of you have requested me to create an angular 9 full tutorial playlist which I have created and shared it in the description box below there are around 43 plus tutorials covering from basic introduction to the advanced concepts so if you really want to learn angular and master angular 9 this is the playlist for you please to watch it out alright so in this particular continuation of the series that we are learning we are focusing on angular forms in the past episodes we have seen how to install bootstrap what are forms in angular what our template different forms we have seen some examples we added validations today we are starting with reactive forms or also known as dynamic forms so using reactive forms in angular is will give something similar experience to the user as template different forms so for the end user it's only means that he will see a form the the the what's different is how we implemented how we design it and how we handle the data using the reactive forms means that we define the form elements the user interactions and the validations in the component class unlike template driven forms which is always where most of the code was written in your template file in reactive forms the most of the logic the user interactions the form elements all of it goes into the component class which is your class file for that to use reactive forms we have to use angular's built-in features like form group and form control modules once we start using reactive forms you will see that it there is a better way of doing data binding there is better way of implementing complex forms these complex forms involved usually will involve complex regular expression patterns will have custom needs will have dynamically able to add some elements remove some elements build that array form array dynamically so it gives you much more better handle at creating forms implementing them and processing the data to work with reactive forms we have to use a module called reactive forms module that's a very very important step when we don't do it we will see errors in our console angular always maintains the state information of your form for example if the form was valid it was invalid it was pristine dirty etcetera using this form state right we can we can do lot of things like validation handle better user experience in terms of showing messages etc we will learn all about that in today's episode we are going to do some hands-on examples to make you comfortable with reactive forms so how do we do it so we will do we will learn react forms in five simple and easy steps so I have broken it down into five steps because it's much easy for you to understand to implement however for a beginner it may look complex right but it's absolutely simple it's easy if you follow these five simple steps so let's get started what is a step number one the first step of using reactive forms in our application is to import the reactive forms module we need to import it in our app module in order to work with reactive forms now if we do not import this we will see errors in our console right so the second step is to create the form itself right so you can take any form any it can be any form it can be login register check out order card etc important thing to note in that form are whenever we do a form we will have to use form group and we also have to use form control name for each of the form fields those are the two important steps to remember when we do the form so before we discuss step three four and five I would say let's start with hands-on and the best way to learn is to code with me to start coding with me if you have any issues please do let me know in the comment section I will be happy to help you let's get started with our application and build some reactive forms all right so let me close it here okay so for the purpose of this particular tutorial learning reactive forms even let's build a generator component and call it check out so I'm trying to build a check out form where I will process some fields some data and then they should be able to see that from working in our application so we generated a component let's generate that all right so we have aren't component which is created it has also updated the opmod we can see it here we have our component which is ready so first thing we'll do is we will add into a routing and add a path for it and I'm going to say whenever the path is check out check out component it's imported here and I have mapped the component let's start the application so now when we go to check out route we should see the default message which says check out works all right so it says check out works so that is what we should see let's see that in action okay so if I say enter ok so it says check out works right that means our basic route is working our basic route is working and we are able to see the default output now the first step we discussed is to import and add the reactive forms module in app module so let's do that go to your app module and here let's import angular forms and we will write reactive forms module so we are now importing and copy module name and we need to add it in the array of imports so first step is completed completed right so what we have done here we have imported the reactive forms module and added them to the inputs array so here we have reactive forms module step one completed now let's go to step two which is to create the form in app component dot HTML which means again there is no restriction as to which component you want to work we are working with check out dot HTML so I will put my form here if you are working with any other form you can put it in that HTML so now let's take that example so I see there is this simple form and get bootstrap dot-com documentation I will copy it right here and let's put it in the component class so now we should see her now we should see our form right let's beautify a little bit by adding class container that way we are wrapping it up in a container that will give it a good look now you see it will be organized right let's throw in a warm title and we should be good to go so we'll say checkout mom using reactive right so far so good let's give a class and say a padding-bottom - ok so now we have our form we have the checkout form and then we have some input type equal to text this is email we have some radio buttons we have a check box right and let's call this as check out all right so so far so good we have done our basic form now remember I told you that to work with step number two is to create the form and assign the form group and form control name right so how do we do that to the form you will keep bind the attribute director which is form group equal to give it a name this name is important so you are doing a form group and assigning a 10 name right you'll see some error don't worry we'll fix it so we got the form group we have given it a name now go to our component class that is step number three step number three is to input it in the component class and map these details so what we will do here is we'll import and color forms and we will import from group or control form array we don't need it we will need form builder now okay so we have got these three right and first thing you have to do is give the same name as that of what you have given in the template here you have given checkout form same name you will use here and define it as this is a form group right so now you see the error is gone this is step three right give same form group name as in the template right just while we are at it I will just quickly add form control name right so we'll give form control name right and we'll give the name what we want to capture here so I will say email address copy it instead of password let's just call it quantity and here we'll say type equal to text and here we are going to give a form control name and I'm going to call it quantity and so so for the sake of simplicity I'm just removing you so that way we'll just keep it the form simple for your learning so for this input I'll give a name here and I'll say form control name equal to terms right and here we'll say all right so this is our form we have email address we have quantity we agreeing to terms right so all right so you have the email address we have the quantity and then we have the terms and we'll check out so we have given the form group name that's step number two we have given form control name so once we have it we have our step number two complete step number three is to import the form crew builder and form control and then create that form name right once we have done it the step number four is to inject the form builder in the constructor so what we will do is in the constructor will create instance of builder so form builder is nothing but it will help us build the form right and with the same details so here I'm going to say here I'm going to say now Here I am defining my controls right now control is nothing but the name that you have given in the checkout component so email address I'm saying the email address right is what it's a so here we are trying to tell that it's a new control right so we will say new um control that's it right so here you are specifying that it's a new form right so what we will also mentioning all the other controls that we have used the other one is quantity quantity and the other thing is terms right and then we have to close our constructor oh sorry so this is the okay so let's say some error okay so here okay expression is unused expression ok we'll we'll fix that we'll fix that okay so now first thing what we need to do once we have done it is here we will do that this is a form we did not specify that that's why there is this error so what I'll do is first you'll say form name right so you'll say this dot checkout form equal to form builder dot group and you will specify the group name here and you will say all right so this I will close the constructor and expected comma okay so here we are specifying just the name let's do that quickly form builder dot group and we are telling we are trying to build a group right and it's an array so we will put it and this okay and and up with a semicolon and then we'll remove this here we don't need this all right so now our form group is ready let me format it a little bit and we are good right so let's go through this now so here we are building the form using form builder in the form builder we are creating a group of form elements these should be exactly same as your form we can also have it dynamic right we will learn this next coming tutorials so don't worry about it so these are some of the nodes that you should know which is using this dot form check out name which is our from group we are creating form group using form builder and then we'll write email address is a form control quantity is a form control terms is a form control right these three are same as that as of our form so if you see here form control name form control name from control name right so whatever name you keep here make sure you copy the same right now let's go to our comm open console and let's start filling some values and here I'll say for like three two terms now click checkout nothing will happen because we have not captured it so what we will do we will write post it if you remember in the template form we are passing the form itself right so we don't want to do it right we are not passing anything here because it's dynamic let's implement this method now I will just say console dot log this dot checkout form right so now you would see that whenever we hit submit it will capture the entire form let's see that in action tutorials at gmail.com these four agree to terms now I am reading check out it will console.log the entire form group you see this so it has given me the entire form details that I want to capture via controls so now under controls if you see we have email address we have quantity we have terms now expand that and you would see its status of this particular form control which is what we have defined here right similarly for quantity if you open you would see it's a form control these are all the details now that is this form control so this is how you can capture any form using reactive forms right this is a simple example to get you started we will do much more complex pieces on this by making it dynamic we will add some things we'll remove some from the array it's it's so much fun to work with reactive forms we will see all of that in detail okay now if you want to get a value of a certain field we can say this dot check out dot so here we have different options like if you want to get the value of the entire form we can say this dot check out dot value now see we are giving some value now we click check out it is giving me all the form values these are all the values which user entered all right now if I want a certain detail I don't want to print the entire form value I don't want to print the entire form value I just want to print value of I'd say email address right this is entire form value right so this is entire form this is the form group object right now you would see that now form dot value right now here I will say form dot checkout dot now what is it that I am trying to get right so if I enter here you see the object again and how do we get the details so once you do that you have the form object so let's make it a form literal I'm using the literal template to print the form this is not single it's tilled so make sure you do it correctly okay now let's see that one more time I have the details captured we enter some value clear here and check out so it gives the object right so now if you want to read that particular object and let's do it one more time sorry about that now we will read through the form instance so I have the form instance I can say dot value dot email address right so if I say dot value dot email address I should see only the email address value printed now I got it here now you see right test at the red test com so that is how we can extract the value from the entire form or individual form elements right so that completes our step number five in the next episode I'm going to extend this particular form by adding form validations in reactive forms I hope you are enjoying this video I hope you are liking my work please give a thumbs up to the video please don't forget to subscribe to my channel don't forget to watch the next episode where I'm going to cover about adding form validations into reactive forms thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 21,511

Rating: 4.9145298 out of 5

Keywords: Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular reactive forms tutorial, angular 9 reactive forms, reactive forms angular 9, reactive forms angular examples

Id: G3MrNLfL2Ss

Length: 24min 14sec (1454 seconds)

Published: Thu Jun 18 2020