Group wise dynamic Radio button get select Angular 4

Question

I have a json array. By iterating this array I am generating the combination of checkbox and radio inputs. But the problem is after selecting one group of radio button when I am moving to next group previous group radio button is getting deselected.

I am providing the code snippet:-

private modalArray = [
    { 
      id:1,
      name:'Bread Type',
      choicetype:"single",
      child:[
          {
            id:11,
            name:"Roasted Bread",
            value:"roasted",
            default:"roasted"
          },
          {
            id:12,
            name:"Multi grain Bread",
            value:"multigrain",
            default:""
          },
          {
            id:13,
            name:"Bishakto Bread",
            value:"bishakto",
            default:""
          }
      ]
    }, 

    { 
      id:3,
      name:'Topins Type',
      choicetype:"single",
      child:[
          {
            id:31,
            name:"Green Capcicum",
            value:"green",
            default:""
          },
          {
            id:32,
            name:"Yellow Capcicum",
            value:"yellow",
            default:""
          }
      ]
    }
  ];

In my view component:-

<div class="pop-mid">
                <div class="pop-tab-block">

                    <div *ngFor="let modal of modalArray" class="pop-tab-item">
                        <h2 class="main-subheading-type2">{{ modal.name }}</h2>

                        <ul>
                            <li *ngFor="let choice of modal.child">
                                <span class="food-type ft-veg"></span>
                                <div *ngIf="modal.choicetype=='single'" class="rsnt-opt-chk">


                                    <input 
                                        type="radio" 
                                        (change)="onChange(modal.id,choice.id, $event.target.checked,modal.choicetype)"
                                        name="choices"
                                    />
                                    <label>{{ choice.name }}</label>
                                </div>

                            </li>
                        </ul>

                    </div>
                </div>
            </div>

How can I solve this? Thanks in advance

Answer 1

Can you try this: <input type="radio" (change)="onChange(modal.id,choice.id, $event.target.checked,modal.choicetype )" name="{{'choices'+modal.id}}" /> in <li> tag