How to use single FormArray inside nested *ngFor?

Question

I have a FormGroup which contain a FormArray. The FormArray is integrated with a multi checkbox code. These multicheckbox actually represent subcategories inside parent categories. parent categories are not an option to select. but subcategories are. When i assigned values which are already selected from ts file. i set the status of FormControl to true and push it in formArray in sequence. Eg. Loop 1 Start and then Loop 2 start and then on the basis of Loop2 value selected status i created FormControl with value true and pushed inside FormArray.

Now the problem is when i present this FormArray in html file. inside nested NgFor i need to supply only incremented values in FormControl as you can see on the blow codes. But I have no clue how to achieve that. because ngFor loop1 will provide index i and ngFor loop2 will provide index j but i need index k on the basis of the total iteration is going.

I have tried ngFor loop2 index j inside FormControlName but as you know this will iterate many times from the beginning, hence there would be same name controller. and hence if i select first item of first category, it will show me that one selected for all the first subcategories of categories.

<div class="row" *ngIf="categories">
    <div class="col-md-3" *ngFor="let category of categories">
        <h4> {{category.name}}</h4>
            <div formArrayName="specialization">
                <p *ngFor="let sub_category of category.sub_categories; index as i">
                <label>
                   <input [formControlName]="i" type="checkbox" value="{{sub_category.id}}"                                       (change)="onChecked($event)" />
                   <span>{{sub_category.name}}</span>
                </label>
            </p>
        </div>
    </div>
</div>

Ivan Kashtanov Ivan Kashtanov · Accepted Answer · 2019-11-10T23:01:23

Just use a product of indices (slightly fixed to achieve the correct order):

<div class="row" *ngIf="categories">
    <div class="col-md-3" *ngFor="let category of categories; index as i">
        <h4> {{category.name}}</h4>
            <div formArrayName="specialization">
                <p *ngFor="let sub_category of category.sub_categories; index as j">
                <label>
                   <input [formControlName]="(i + 1) * j" type="checkbox" value="{{sub_category.id}}"                                       (change)="onChecked($event)" />
                   <span>{{sub_category.name}}</span>
                </label>
            </p>
        </div>
    </div>
</div>

How to use single FormArray inside nested *ngFor?

1 Answers