How to bind a formarray of form groups from parent to child component in Angular?

Need help from anyone who has worked on angular reactive forms. I have a parent component and 3 child components

In the parent component, I have a form which looks like this :

parent form :

formarray1 : formarray[5 formgroups]
formarray2 : formarray[5 formgroups]
formarray3 : formarray[5 formgroups]


Parent component :

<form [formGroup] = "parentform">
@for(i for index){ //loop runs 5 times
<app-child1></app-child1> // bind array1
<app-child2></app-child2> // bind array2
<app-child3></app-child3> // bind array3
}
</form>


In the child component, there are form controls and validations done for that Formgroup.

How should I bind the 3 formarrays to the 3 child components in such a way that for every loop run the "i" value in the formarray is binded with the "i"th template of the child component?

Continue reading...