Angular 10 Tutorial #69 - Reactive Forms - FormArray | Angular 10 Tutorial For Beginners

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 in angular applications one of the most commonly uh commonly used feature in any web application is to provide user to add dynamic content and that dynamic content comes with the form controls for example you might want to add more than one address to the in the application you might want to add more than one document you might want to add more than one field so that is where the dynamically adding capability comes into picture that means that you are dynamically adding some form control to that form and also removing it that's where form array comes into play former is one of the most important and essential concept for you to learn and master reactive forms a lot of times people get scared they think it's complicated they think it's tricky it's not i'm here to make things very simple for you i'm here to explain you the basic going to show you basic use cases also show you some of the advanced and complicated use cases i'm sure after this episode you will be much more confident of using form arrays in your application let's get started this is part 69 of the angular 10 full tutorial playlist for beginners the playlist link is in the description box below make sure you check it out i have planned more than 100 tutorials right now we are on the 69th episode following are the topics that i have covered in detail from ground zero from basic to most advanced covering lot of use cases so that you it will help you to learn and master angular so make sure you check it out also if you have any doubt on all of these topics that have covered so far please do let me know in the comments section i'm trying my best to help as much i can i'll definitely reply to your comments all right a quick note to our viewers for joining us new in this episode what are reactive forms reactive forms are a way to create forms in angular application the other way of creating forms is called template driven forms some of the important concepts that are related to reactive forms are form group form control form builder and today we are also going to explore and learn about form arrays remember that we need to import reactive forms module in our app module if you want to work with reactive forms a lot of times i get error messages in email saying that it's not working and most of the times it turns out that they have not imported reactive forms module so make sure that you have imported it correctly all of these i have covered in detail in the previous episode so if you are joining us new kindly please refer to the previous episode so that you learn and master reactive forms all right uh three important things i tell you to remember form control form group and form builder i'll add one more to this for starting today which is form array so what is form array right i will not go into a technical jargon because that's what you can find it everywhere else on the web or youtube or anywhere else right rather i'm going to make it very very simple so that you can relate to what form arrays are okay so for that i will take you back to the whiteboarding or in this case blackboard all right so what is form array right so let's think of some use cases so that you can relate to what form array is then i'll explain you the technical words imagine you have a form where you want user to add multiple addresses especially if you're working with banking insurance applications you would see that you can add or even for that matter e-commerce applications you can add multiple addresses each of this address will have address 1 address 2 state city zip and you can add them multiple times to the form right so when the user clicks on an add address button or a link we allow him we show him with this fields and he can enter it that means your dynamically creating this fields and adding it to your form one more example i'll give you you will provide user to add multiple files and one good way to relate is gmail in gmail you can add multiple documents multiple files to an email so whenever we click on add new file it's giving you a new form control and it's giving us an option to add new file one more example i'll give you if you go to say instagram or facebook you can add multiple fields like websites let's say link your websites you click on add website it will give you a input text box where you can add one more website link etc or even for that matter think of a online resume builder where you can add multiple colleges to your resume each college will have college name etc college name degree percentage etc and you can add them multiple times similarly you can add multiple experiences in your fields like each one would have a company name designation etc and these you can add any number of times in your application or for that matter look for any invoice builder you can add multiple products each product will have a product name uh it will have some price some tax and then final amount etc so what you are seeing here is that in all these examples that i gave you we are doing some basic things let's see what in now in technical words we have a form we have a form and we are dynamically adding form controls form controls to our form so far if you remember and if you're following from the previous episodes you would see that we the forms were pretty static right pretty static which means we defined the form control in our component or temp template and that is what will appear in the template right whatever we define in our component in the form builder that is what will appear in template but now we are saying we can dynamically add form controls to our form and what is form array form array by the name itself it says it's an array it's an array and what is an array of made of it's made of form control it can be made of form group it can be made of form array internally as well so form array is nothing but set of controls or set of fields which are grouped together now what is an array like i said it can it can have form controls it can have a form group it can have a form array anything that when you take multiple form controls it becomes an array now we can also have a combination we can have a combination of above abstracts now for example i can have a form array which has a form control and it can also have a form array i can have a form array only of form controls that's also fine we can have form group form control and we can have any number of form groups any number of form controls so see essentially what you are doing is you are building an array of form control groups or form array right now related to this what are these these are form controls when you group all of them together it becomes a form group and that's what you're forming an array of if you take up this example which is college name degree percentage again it's a form group which your which you can add multiple times that's why it will become a form array right so this is an example i hope i made it clear to you what is a form array we will deep dive now with simple use cases and make it also complicated but before that let me quickly walk you through some technical words so that you can relate to it now like i said for complex forms you will need form arrays whenever we work with form arrays we can add elements we can remove elements from the form easily form array aggregates the value of each child form control into an array when we define an array of form controls or form group basically we are grouping form controls together a form array finally will have the value status value of the values of each form control the status of it the status of the form array is calculated by reducing the status of each of its children if any of the one control becomes invalid the entire array becomes invalid i hope it's clear but it will be if you have some doubts hold on to that thought because right now i'm going to show you with some very basic use cases to advance to help you master reactive forms form array let's get started so before we do that let me start the application in the meanwhile please if you are liking the tutorial please do like please do subscribe to my channel please do support me thank you in advance all right so while it is getting compiled i will go to loanstype.com.ts that's where we are building a reactive form so let me go to our application and let me show it here we have it here and we are going to say loan types all right so this is a simple form let me little bit clean it up so that it's even better and clear to you i don't like using table but i'm throwing it right now because little bit of beautification always helps and that is only to make you comfortable again i don't want to spend too much time in designing because you know that what's important is to learn the concepts because design can always be customized so let me show you here so we have it here and similarly i'm going to create one more quickly tr so arrange this into trtds and so that there is little bit of formatting all right and we'll throw in some quick td and throw the tt here to a group and then you have some simple table i'm not going to spend time rather i'll go and teach you the concepts better so we have this reactive form and we enter the value it will show we added validation last time if you remember the previous episodes and there is something that we need to enter minimum values etc the form is disabled now it's enabled so this is a simple reactive form that we did let me show you the form group first and if you see the form group this is what we have it says it has only three fields right now loan name loan type and loan description look carefully this is for the loan name this is for the loan type and this is for the loan description so once we have it now what we are going to do we are going to start implementing form arrays but before we do that let me put it here how so how do we define a form array let me show you some basics first and then we'll get into complex use cases so i'm going to define an um array and let's call it users equal to and i'm going to define and say it's a new form array and whenever we say it's a new form array we will give values just like how you define arrays but now this is an array of form controls very simple use case nothing complicated i'm saying this has and i'm saying form control and ipad it's an array and here i'm going to say let's say arc tutorials and i have a simple use case so what does it say it says there are two form controls and i'm grouping them together to make it an array so like in other words i can say this is an array of two form controls yes and now we are going to display that in the ui but before we do that let me show you what happens when you print users here and also print users value okay so let's see this use case now alrighty so here we see there are value two array it's printed a form array when i print users it is giving me form array which has two values this is a formula i see here and i'm saying there are two values which are nothing but arc and tutorials which is what the values i have given now what we are going to do let's put that as part of our form okay now this is a simple use case right use case one which is defining a simple form array start with this very very basic start with baby steps so now i've got a form array now take this and put it to the form so now see i'm adding a new field to my reactive form this form i have which is a group which has three fields loan name loan type loan description you can see here it's just simple loan name loan type loan description now add one more field now i'm going to call them users and what is this type just like how we defined new form control we are going to say new form array like what we did here so see here this is what i copied what we just defined which is new form array and i'm putting it here what i had it here see we defined it here and i'm just saying new form array of two form controls i am adding it to the form now okay so now this form has four fields but we need before we see anything we have to first update our template so that it is visible right now we don't see anything because we have not added in the template so let's work on the template now remember friends this is where you most people make mistake most developers make this mistake so make sure that you carefully see it so that you don't make that mistake all right so what are we going to do in this case let's say trtd whatever now i'm throwing in a div and let's give for the sake just follow the same form group now pay very careful attention here here we are defining form control you see here form control name you see here form control name equal to loan name because it's a form control but this what we are going to add now is a form array that's why you have to write form array name equal to same name of what you gave here which is say users and put it here close the div so remember friends here you will give form array name all right so let's throw in a label and i'm going to say users then you need to loop it because it's an array remember it's not a form control it's an array so i'm going to say let control of the form name what is the form name let's add loan types name and then you would say in that you have a control what is the name of the control dot users right and inside that you want the controls which are in that array so i'm adding one more array bracket and saying in this form find a control by the name users which is this inside that find controls which are these two so that's why i'm adding controls here and i'm going to say let i is equal to index and close it the div here and now we can just loop them and print them here and now i'm going to bind it and say form control name because these are again controls that we are getting from the array so i and let's close it now we should see it in our ui we are getting arc and tutorials so what we are saying there is a form control by the name users which has two more controls in it so we are looping and printing the values we are binding by using form control name this is the first and the four most simplest example i can give you of form array now like i said this form control can have anything it can have a form control it can have a form group etc i hope this is clear to you because right now we are going to go ahead one more step and create a little complicated one are you ready for that let's get started so what are we going to say so now what we'll do we want to insert a new one okay so now we are saying we want to have a little complicated one so i will comment this here save it in the in the template also i will comment for your reference because i'm going to now make it little complicated here follow along if you have any doubts let me know in the comments section i'll try and help you all right so now i'm saying i want to make it little complicated so i'm going to say users i'm adding a control by the name users now i'm saying it is still a form array but now the array will be little complicated so now i'm going to say that i need i don't want just a form control instead i want a group so now you see we built we used a form builder you see here we you we are using fb which is nothing but not facebook but it's a form builder you see here this is the instance of form builder so i'm saying this dot form builder dot group so i'm saying this array will have now three things so let's say it here and what what is this group going to have so i'm going to say it would have a name user one user will have a name which is new form control right and you can initialize any value just like how we learned for anything or you can leave it empty for now and then you will say i need to enter the age again if it's a girl don't ask for h not a good idea all right so here you got second field and then you would say um say department i mean again you can add any number of fields the idea i'm trying to show here is that you can have simple form control which will be grouped together as a form array or now i'm saying this array will consist of these three fields which becomes a group right so now this entire field will have three things to it age name age and department right so now let's try and map this into our template so again i'm going to copy this so remember friends whenever we do this you need to make sure that you have the template updated accordingly so how are we going to do that same way copy this again or let me type it for you so that you get feel of it class equal to form group all right and again i'm saying it's a form array name what is the form array name users now let's throw in a label and say users and again div and i told you since it's an array we need to loop it and we are going to say let control is it necessary to call it control absolutely not you can call it anything that you want take the form name and what is the control name in it so we are saying control start what is the name that we gave we gave it as users and what about users we need to get the controls which are inside this particular form con array control which is users so i got the controls then what are we going to do we are going to now see this is tricky guys because it's a group okay it is not a form control you see here and here difference here it was only form control so i used form control directly but now this is a form control array so it's a group so i'm going to say here index ends and now i'm going to give the name pay very very careful attention a lot of you will make mistake here you will say form group name because it's a form group that you're working with now so you will assign that value i close it here take a look at this guys again so that you don't mess up this because a lot of you will miss this for sure we got a form array name by the name users and i am looping that array let control of form name dot controls dot users in this form find a control by the name users the controls which are inside this array since we are talking that it's a group so i have assigned form group name equal to i and now we can just simply bind it and we can say input type equal to text and then i'm going to say form control name because now i know that they are just form controls which are inside a group copy this three times because we have three form controls and department that's it now let's see it in action okay there is an error okay good errors are good that's how we learn okay so it says angularjit compilation failed all right so no worries loans type is declared okay let's check here what is going wrong um we got the users and we got let's let me check one more time what we got here we got the uh name we got new control form control control and empty age and department have we closed it correctly yes we are closing it here and we are saying okay so i'm going to stop sometimes you just need to restart so that the compilation takes place in the meanwhile let's check the template code we got the former name users and we are saying control of index i so far looks good to me but still there is an error let's see you will run into issues with this but don't give up not yet all right so we got controls form group name all right and we got the department name but still looks like there is an error let's see what it is uh app module loans type is declared unexpected token okay at okay it says the error that unexpected token equal to at line number 61 oh okay okay so we got it here so here we need to define let i is equal to index so that's the issue i hope it should go over now uh let i is equal to inflex what's wrong uh this is okay i think that should have been the problem that should fix it we got correct closing of the quotes and form name is equal to i it's close i think it should work now yeah it's compiled successfully so okay so we go to loans types so now you see we got three fields because this is a form group which has three controls name agent department how do we set some value so let's see let's set some value so we know that apartment tutorials all right so you see it we got a form array which has now three form controls which is basically a group now this is an array which has group now no brainer here the next usa use case that we will look is this is a form array with a form group so see slowly we are making it complicated we have a form array which has simple form controls we also saw form array which has a group now yes the next use case is adding and removing the elements from form array dynamically which is what basically add or remove elements so we are going to add a plus byte button here click on it it will keep adding click on remove it will remove it but that's for the next episode i don't want to make this too long please do drop me any comments or questions you have i'll be more than happy to assist and help you i hope i'm trying to make things easy for you so that you can follow and understand if you like the tutorial please do like it please do share with your colleagues if you like my work and tutorials please do consider buying me a coffee at buy me a coffee.com our tutorials thank you so much for joining will continue learning join me in the next episode we will learn about nested form arrays will do add removing of the elements from form array extremely important topic i want you to really learn and master this so let me know if you have any doubts thanks again for joining

Channel: ARC Tutorials

Views: 6,400

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: 9BJa6u_Gs1w

Length: 29min 31sec (1771 seconds)

Published: Sat Mar 20 2021