Angular Reactive Forms - Form Arrays | Part-6

hello guys and welcome back to my youtube channel and in today's video we are going to discuss about the nested form and this is the last section of our angular form tutorial series so I would not just say it as an asset from or rather I would say an advanced version of nested form and that is because if we go by the definition the nested form is actually a form that is embedded inside another firm now if you have seen my last video reactive form a couple of videos that I posted previous in this series about reactive form you must be aware that we have the same kind of form inside that so over here in reactive form we have this bunch of controls that belong to the headrests are part of a separate firm group which is added to the main form under the property of address so that is also kind of a nesting of the forms so we have a main firm group and inside that the address wrong group but here what I want to demonstrate to you is that here we are just not embedding informed group inside a different farm group but we are creating an area form group so in this case suppose I have this address from group I will provide you the functionality to add as many addresses as you want and remove if you want any particular address group so that is more like a dynamic edition of the farm inside the main farm so that is the concept of form arrays that we are going to discuss today and in a similar manner in the next video I don't take you how to handle the multiple checkboxes using the form errors now multiple checkboxes are something that will not provide it out box or easily manageable with our forms so you have to take certain workarounds to work with them and that is the portion of favorite food over here that we are going to discuss in the next video that how we can bind the multiple checks boxes how we can retrieve their values and arrange their values in the order we want to post it to the back end or for any further use but here for this video we are going to focus on the concept of form areas for the groups that is over address crew and with this without wasting any further time let's get back to obvious odhh and see this whole thing in action okay so this is the HTML of our nested form component and the typescript file okay so type of script file actually contains two instance variable that are the state which contain their state and it is almost available in every of the component that is a very active template because from here I am binding my state values and then the truth sorry that will actually bind over multiple checkboxes later in the next video but currently I am not using this and now it is the time to create our nested form so just like with the reactive form actually this mr. form is actually an extension to the way active form so we will using the same concepts that we use in the reactive form so we have to first include the form builder okay and this form builder comes from angular form so let's import it quickly okay so we have a farm builder now let's create our first nested form variable so I will name it nested form and that will be of type farm group and again the farm group will come from angular forms so I was just going to include that way here okay now with the farm group ready let's try to initialize our farm this that nested form and it will be this dot F be our form builder the ad group now inside this farm group we will have over two controls first name and last name okay and apart from this we will have two more controls over here and that our first favorite fruits so I will name it Feb fruits and it will be a firm control but I will commend this one right now because we will see this later so when I will talk about binding multiple checkboxes in the next video then I will uncomment this slide and far right now let this line become entered and move to the next control and the next control like always will be address now here is something a spatial this is not going to be a normal farm control instead it will be an array so this is going to be this depth of a form builder and it provides property for the method called array now this will be an error and here I'm going to put my thumb group why because I want to initialize at least one form for the display at the initial level so let's just let it be like this if I show you our browser you see that at the initial level we want to load at least one form right here for the user to enter then at the later as per his wish he can add more forms and remove but for the least bare minimum we want one form right to be presented at the initial level so I will create a separate function to get that form group so right over here after our ng are in it I will create a function add sorry address group now this is very interesting function it is going to return a firm group so I will use again our form builder that group now what this group will contain actually so if we go again to the browser you will see we have few bunch of controls won the primary flag whether that was primary or not the street address city state and zip code so let's hard code these particular controls right over there so the one is primary flag I will name it primary then your street address city is straight and then zip code so that is all that is the most controls that this particular form group will contain and as this function is returning this form group I am just going to simply call this function right over here so I will do add address group so when this function will be called it will actually return a farm group which will be added to of a farm array and that particular farm group will be assigned to the array that is our address property enable nested farm so that is how it is going to work later we will see how we can add their dresses and remove the addresses dynamically but right now with this bare minimum it's time to bind this particular nested form to the HTML and as I said that we are going to use those same concepts that we learned in the previous reactive form section so let's jump to the HTML and search for our form tag so right over here nothing at the very top you must be having a reformed yeah over here so the first thing that we are going to bind is the farm group property so this is going to be binded with our nested farm so I will name it nested form if you don't know what it is so it is coming from this particular farm group name that we have initialized our main route form element now just like in reactive form the first name and the last name will be binded with the form control property or some control name so I will use form control name and that will be first name and let's copy this and go for the last name and it will be last name yeah removing Norris okay so we have added firm control name but what about the address section actually does for Mary so we simply can't use like firm control name over there directly because that particular firm group is actually in a state form group first of all and later it is a part of every so for that what we are going to do over there is we are going to place an attribute over here which is called from array name so in this property we will pass the name off of a form array and if we go back to the type of script the name is address so inside this form group half of a nested form this address field is actually an array so I will copy this name and I'm going to paste it over here so this will tell the angular that this particular section belongs to this for marinade so this is good that we have defined the for Mary name property but actually what we want in reality is that we want to repeat this section of address form multiple times depending upon the group we have inside our array so if you are little bit aware about handler you know if you want to repeat a certain section of the Dom you use ng for directive and that is the same thing that we are going to use over here but in default on what on what we want to repeat so if you see in our type script this address property or the address array actually contains farm groups so we want to loop on the controls inside this array so now this array dot control property will actually contain the groups inside so to use this particular address dot control property we have to create a getter so I'm just down below here in the code create a get address very simply like this and here I am going to return a for meri and that will be there dad nested farm dad get and what we are going to get is a dress so that is all we are going to return from this particular get a method or the getter property so everything is okay except the part that this form array needs to be imported from Anglo form so let us get to the top in the wine ports and I will import firm array okay so this is done we have this address area way here okay so let's just simply copy this and right away here on the next line the section we want to repeat so if I just close this particular row you will see this is the complete address Dom so all the controls rest inside this section so if we apply ng far over this it will replicate those controls so I'm going to use ng fork and let I will come back to item later we are going to do address array dot controls so that is the property now controls in a farm group will give you the form controls inside that particular form group but when we come to array and as this area contain form groups this property will return the groups so I am going to name it group now as we are going to loop over the farm groups inside this address array so this particular group variable or the attribute will define the particular group at that particular index in our array so we will see the use of this particular group variable later but right now let's add let is go to index to get the index and that is very important we are going to use this variable twice in this tutorial for two different reasons so great that we have the loop ready and this particular section of Dom will repeat itself depending upon the number of form groups inside this array but again we have to bind the controls to the farm group that are inside this array and for that just like in reactive form we have the property called form group name to bind in the state form and that is the same thing we are going to have it over here so I am going to have some group name but this time I am going to bind it with something that is why I am going to use the square bracket notation so that angular understand that the value I am passing is a variable which needs to be binded with this and as we are looping over the array of firm group so each individual index will point to a certain form groups so I can bind this form group name property do the index I so this is the first use of the syntax so now we have a reform group ready now we want to do one thing that is buying the form controls so let's directly jump to the controls okay so this is our first control that is whether the particular address is primary and now the check box so let's bind this and we will bind this with firm control name and the name of the control over here will come from this particular address group that we are returning to the farm area so it is primary flg similarly I will just copy this particular thing and pass it to all other controls now this is something you must be familiar with from the last two videos this is going to be straight address then city and state and zip code following that okay so now we have added the form controls and bind it over control to the group now the two things that left is that we have to provide the functionality to add the form on the click of add bitter and remove the form on the click of remove pattern so to provide that functionality I will go first to the buttons that are given okay so these icons are actually going to act as the button so for this add item I am going to create a function that I will bind to the click event of this pattern and the function name will we had address and similarly I will add another function which I will bind to the click event of this remove button and I will name it remove headdress okay I will come to this remove address later but first let's go to this add address so I will copy the function name and create the function in the type a script with the same name just over here and what I'm going to do so I have to add a new group inside of a farm area so I will access my area with the address Eric Gator that we have created so I'm going to use the same name that is over here so this is a getter property so I can use it like this dot address array and I'm going to simply push a new form group inside it and I will call the push method and then we'll call the function of add address group just like this so what is going to happen when this function is going to be called it will return a farm grow which will later pushed into this array so this is the simple function to add the group based upon the battle quick now about remove address so that is something particular we want to remove the address only on which that particular close button or the remove button displayed so suppose we have three forms and we click the remove button on the second one we just don't want to remove accidentally the first or the third we want to remove only the second one and how we can achieve that move address name and add a function over here and this will handle or accept the parameter index which we have passed in the name of variable I from our HTML and again we are going to do a very simple thing over here this dot address array that is our for Mary dot remove it property so this is the property provided by farm Harry and I will pass the index and that's all so this particular line is going to remove the farm group or anything inside this area from that particular index and as in our case we have the array from group it will remove that group so with this thing ready I hope that we should be able to get the particular bindings working well with adding and removing functionality also working but the one last step that is left is that I just want to log the value of our song to show that the particular form controls are binded and of working as per the expectation so I will add a function submit handler and Here I am going to do console dot log and in this I am going to log nested form that is going to be this dot nested form dot value okay so our function is ready now the only thing is to bind this on the click of submit button so that we can actually log the values from the front end okay so it is done let's save this file and the type of script file ok the cur is compiling let's get back to a browser okay so you could see that our form is loaded and there is an initial form available that means our looping is working fine otherwise the ng4 should have broken now let's add the values so I will add my name check this property type is at 4 0 redmond city as anything like Bangalore in India straight a our zip code 1 2 3 4 5 and you have seen that the street wasn't having the default value and that is because just like in the reactive form section we have to pass the ng value property to it we will do this later and let's hit submit so you could see the values over here interesting we have the first name last name and you would see that the address is now actually an array it is not just a nested object in case of the reactive form example we have seen it is actually a hurry and you can detect this because over here it is written array with length 1 and with these square brackets also so let's open this airway so we have only one element inside this array and that is primary flag is true straight AR city Bangalore the street address Redmon and zip code so that means we are getting the value from all the controls that means the binding is working too good okay so now let's make this more interesting and try to check the functionality of AD address so let me click on this group again you can see that we have a group of address form added just below our original form that is the previous one as we are pushing the farm so it is getting added at the bottom and let's fill this form with some different values so I will not check this thing his primary address and I will name it five zero one proclaim city burn or anything and you can see that is what I'm telling you that a state is not having the default choose value that we will fix CA and this time nine nine nine nine nine and let's clear this console and hit submit again okay so there's no change for the first name and last name but this time the address has two elements the first one you could see our original or the previous form of the address and then next one with the new values so the form is working fine only the thing is that we are having this address one for both the cases and actually that is because we have hard-coded this and or I could say I have a hard coded this so I will just replace this one with the index value plus 1 because index has start from 0 so far the first it will be 0 plus 1 for the next one it will be 1 plus 1 so that could be done easily by the one-way binding or the calibrator syntax now let's try to remove one group so suppose you can see we have two different groups with values of 5 0 1 and 4 0 1 let us remove the first one so if we click this remove button you see we have removed the group so now the 4 0 1 group has gone and only the left one is the 5 0 1 let us again add a new group and this time remove the goof from the bottom and let me click this and great we have the top 4 left so that means the functionality for removing and adding groups dynamically is also working now let's fix this state and address thing so back to our via score in our HTML I will directly jump to the address section and this is the place where I have hard-coded address 1 so I'm going to replace it with curly braces and I will do this hi plus 1 so this will replace that thing the coming of numbers which is hard-coded now it will be dynamically generated based upon the index and the next thing is the Select box so right away here in our state control just like reactive form I have to use the property ng value with the default value of null so with these two things if I get back to my browser you could see that the state is now showing the default option and if I add a new group it has the value of it just true when more it will have the value of F just 3 there some of this quickly ok so that means it is working fine now the validations in the form Ares how the nested forms are actually same as we have done in the previous video of the reactive form it isn't nothing different so I'm not just going to tell you the same thing because it will be the like repetition of the whole half an hour video from the previous section over here again so if you have gone through that video it will be just boring for you and it does not serve the purpose also but yeah here I want to tell you one thing is that when you provide validations on this farm group that is our array actually so over here in this form group you will add the validators suppose for the state I suppose if you do null and the validators dot required and you have the required validator to it and let's import the validators from angular form okay so what will happen is that a validator is attached to it but for the concepts of custom styling or displaying their error messages you're aware that we need to have the access to this form control so that we can check the properties like whether it is valid whether it is touched or not so suppose if right away here we have to create or get the instance of our first name or last name control it would be very easy we could simply create a getter and then we will return this dot nested form dot controls dot first name and last name and then we can use that getter in our HTML okay but when it comes to from arrays which contain groups and those groups then contain the controls it becomes fairly complex the reason why is that the getter cannot take the parameters so actually this Gator or any Gator you define cannot contain a parameter and now as you're aware that this form aro will contain multiple groups so suppose you want to validate or you have a validation error on the third form group now how you will know that which particular group you are addressing to because you looping the group in the Dom you haven't hard-coded three different groups in your HTML you only have one particular firm group coded with ng for applied so which particular group your validation error fails it is totally dependent upon the index that is why we have in the HTML and now suppose you're not able to pass that index to the getter how you will get the form control instance of that group so for there comes the rescue with this group variable so have told you earlier that this group variable is actually the value or the individual item inside this address array so for every section that is getting repeated this particular group will contain the instance to that front group what I could do is that I could use this group variable to get the instance of that particular control so I will explain you with the example of this validation applied to state drop down so suppose we have a validation error and we want to apply his invalid class on to this state control so let me just move to this state control right over here and I haven't remove this class attribute with ng class and then wrap this whole thing in curly braces single codes now this value is going to be true for every instance because we want to apply the form control class every time but I want to apply is invalid class only in the case when this control is invalid now how to check that this control is invalid so what I can do is I can use that group variable that we are looping and getting for each individual group then inside that controls because it is a funk group so I could have controls then a particular form control so that is a state and then with the invalid property similarly I can add the no condition for the touch so I will copy this particular thing dot touched so let's see if this thing is working so I will save this code and I will save the code of our type is quit so the validator is added to this particular control and let's back to our browser okay so our app has reloaded just try to fetch this particular control and move out and you could see that the is invalid property is now applied so this is how you can actually get the access to the instance of the control inside the form array and then inside that a group and then particular control so you can use this particular syntax or the method to reach to the control and then you can use it for various purposes like this playing the errormsgs or something like applying the classes or anything but I'm not going to demonstrate that whole thing because it is similar to what we have done in the reactive form section and I hope if you go properly to that reactive form section you must be aware of what will be the next step to be done - particularly bring the form into that particular position where we have all the classes and validation applied properly and still for the few people's who really want to have a deeper look onto the validations in this form for each individual control and if they have some hard time understanding in reactive form and want to see the actual code so the final project that I will post to github will contain the proper validation proper customer styrene classes and everything applied to every single control in this particular nested form also so you can download the project from the github and once again the link for the same is given in the description box and then you can have a look on the particular whole code set that how I'm applying the conditions how I'm using the validations and what is the complete working logic behind that but I hope this video for the purpose of explaining the concepts of form air is validations and other stuff this particular thing is enough and you can use the concepts from the previous video combine it with this video and you can have a particularly fairly complex form working in your angular app so I hope this video was useful to you guys if you guys really liked this video please go hit the like button comment for some suggestions or if you want to know more about something if you have hard time understanding something just put it in the comment and I will try to explain it or create a video separately onto that and please don't forget to subscribe to my channel and I will see you in my next video till then thank you

Channel: Azhar Husain

Views: 29,184

Rating: 4.935185 out of 5

Keywords: angular reactive forms form arrays, angular form array, reactive form, angular model driven forms, angular 5, angualr 6 forms, form array in angular 5, reactive form array, reactive form validation angular 5, angular dynamic forms, angular add remove nested form, angular forms, angular tutorials

Id: aHD7PLXKTsQ

Length: 29min 20sec (1760 seconds)

Published: Sat Aug 04 2018