Angular nested ngFor with radio buttons

Question

Hi i'm trying to loop each variant and then assigns a radio-button to each option, the issue i have is that i can only choose one item of total variants, when i'm looking for to get one item of each variant, this is what i tryed with indexes. thanks for your help

let obj = { variants: [ {name: "sauce", options: [{name: "soy", price: 3}, {name: "mayo", price: 1}]}, {name: "size", options: [{name: "xl", price: 4}, {name: "m", price: 2}]} ] }

<div *ngFor="let variant of obj.variants; index as i"> <h6>{{variant.name}}</h6> <div *ngFor="let option of variant.options; index as j">> <div class="custom-control custom-radio"> <input id="option{{i}}{{j}}" type="radio" class="custom-control-input" [value]="option" [(ngModel)]="radioSelected" (change)="setRadioOption(variant, option)"> <label for="option{{i}}{{j}}" class="custom-control-label">{{option.name}}</label> </div> </div> </div>

It is not clear what exactly is your issue from the description. Can you add some more information about what you expect and what you get? — Charmis Varghese
– Charmis Varghese, Commented Nov 12, 2020 at 1:29
i need to get one item of options of 'sauce' and one item of options of 'size'. The issue i have is that i can only choose one item of entire obj.variants. — sonEtLumiere
– sonEtLumiere, Commented Nov 12, 2020 at 1:32

Charmis Varghese · Accepted Answer · 2020-11-12 01:43:03Z

You need to group radio buttons by adding name attribute to get the behavior you want.

Your input element would look like:

<input id="option{{i}}{{j}}" type="radio" name="option{{i}}" class="custom-control-input" [value]="option" [(ngModel)]="radioSelected" (change)="setRadioOption(variant, option)">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Thanks!, it works only if i quit [(ngModel)]="radioSelected"

Collectives™ on Stack Overflow

Angular nested ngFor with radio buttons

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related