Creating formarray of formgroup objects in Angular

this is part Wendy of angular 6 tutorial in this video we'll discus creating a form array of form group objects if you're wondering why are we doing this well this is preparation for dynamically creating form groups at runtime every time we click Add skill button on this great employee form we want to be able to dynamically generate a new set of these three skill related form fields that is skill experience and proficiency we want to generate as many skill sets as the end user wants or the user has to do is click the add skill button so in this video we'll do all the preparation required for that this is our create employee component class the first thing that I'm going to do here is move this piece of code into a separate method in a bit you'll understand why we are doing this I'm going to name that new method add skill form group and then let's place that copied code here and forget what this code is doing is returning a group with these three skill related fails so let's use the return keyword here since the method is returning a form group let's explicitly set the return type of this method to form group the next thing that you're going to do is turn the skills control into a form array from a form group if you need to form arrays we discuss them in detail in our previous video so to turn this control into a form array we are going to use the form builder array method instead of the group method we already refactored this piece of code into a separate method so let's delete this code and we are creating an array here so let's use a pair of square brackets when this form loads for the first time we want to have at least one of the skill form group so for that to happen within our skills form array we want to call this add skill form group method that we just introduced this method returns a form group of these three skill related fields so within the four Marais let's call add skill form group method now if you're wondering why we have created the separate method well that's because in our next video we are going to include a button here add skill and every time we click this button we are going to call this method add skill form group and push the form group that this method returns into this skills form array this allows us to generate these three skill related form fields dynamically in the component class we converted the skills control to a form array from form group but in the template it is still a form group so we need to convert the skills into a form array just about this form group name div I'm going to include another there and then let's move this closing div right here and on this tab let's use former a name directive and bind this div to this skills foam array in the component class now one important point to keep in mind is within our skills for Murray we only have one skill form group and that form group is present at index position zero so we will have to set this form group name directive to zero instead of skills because skills is no longer a firm group it's a form array and within that form array our skill form group is present at an x position 0 so at this point let's save all our changes and take a look at the browser notice in the browser console we do not have any errors that's good now let's quickly verify if the validation still works the validation for all these form controls seems to be working now let's verify if the skill related form fields validation works notice it doesn't work anymore for these three skill related fields so let's understand why our skill form controls are present in a farm group and that farm group is present in a farmer now if we take a look at our log of validation errors method this method is responsible for showing and hiding these validation messages so in this method notice we're looping over all form controls and form groups in this employee form route form group if the control that we are currently iterating over is an instance of form group then we are recursively calling this same log validation errors method passing it that form group now the important point to keep in mind is within our employee form route form group in addition to form controls and form groups we also have a form array so we should be doing this kind of a similar check if the control that we are currently iterating over is an instance of form array then we have to get to the form group within that form array and then recursively call the log validation errors method passing it that form group so let's make a copy of this and then change the bits that are required so if the control that we are currently iterating over is an instance of form array let's loop over all the elements within this form array for that let's use another for loop I'm going to create a constant let's name it control now we need to check if this control in the form array is an instance or form group so let's include another if condition here if it is an instance of form group then we want to call this log validation errors method recursively passing it the form group we do not have any errors in the browser console which is good now let's quickly verify if our skill fields validation work looks good let's also quickly verify if the validation for the rest of the fields work everything is good so in this video we have prepared the ground to dynamically add skill form groups what we have done so far is converted the skills control to a form array from form group and at the moment within the skills formally we only have one form group and that form group is present at index position 0 now to bind this skills form array in the template they using form array named directive and to bind to this form group they using the form group named directive we also fixed the broken validation in our next video on this form will include a button add skill and every time we click that button we want to dynamically generate another set of these three skill related form fields that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 53,645

Keywords: angular get formgroup from formarray, angular formarray of formgroup, angular formgroup in formarray, angular formgroup inside formarray, angular 2 formgroup in formarray, angular formgroup add formarray, angular form array push formgroup, angular formarray with formgroup

Id: qNsFvwlzhDs

Length: 7min 42sec (462 seconds)

Published: Tue Oct 30 2018