Reputation: 1
I need some help to write nested ngFor loops in Angular. Need to have always 3 same answers(radio buttons) for a loop of questions (checkboxes).
My code:
<ng-container *ngFor="let daType of daTypes">
<mat-checkbox [name]="daType" [(ngModel)]="data[daType]">{{some string interpolation}}</mat-checkbox>
<mat-radio-group id="daTAs" name="daTAs" [(ngModel)]="data[daType]">
<ng-container *ngFor="let daTA of ansYNU">
<mat-radio-button [value]="daTA"> {{some string interpolation}} </mat-radio-button>
</ng-container>
</mat-radio-group>
</ng-container>
daTypes
and ansYNU
are both arrays of strings.
By writing it like this all radio buttons act like one - if I check "yes" in the first question, and then "no" in second, the first "yes" doesn't stay checked.
Can someone see where the problem is?
Upvotes: 0
Views: 187
Reputation: 183
As a rule, all radio groups should have a unique "name" attribute. In this case, in each iteration you are render a radio group with same "name" attribute value.
I advise you assign them with different "name" attribute value each one.
Upvotes: 1