Search code examples
angularradio-button

handle radio button behavior in multiple loop

I am having trouble in controlling the behavior of multiple radio select in multiple for loop.

In below demo, when I check radio of 1st block it is selecting the same radio in 2nd block too. Please have a look. Actually I need to select different radio option in different blocks.

demo: http://plnkr.co/edit/YpQZyv55tKxTGwDEi5gS?p=preview
Solution

  • Change in template 

    <div *ngFor="let a of abc; let i = index" >
  <p>{{a}}</p>
  <div *ngFor="let enum of enum_details; let e = index">
    <label for="enum{{i+1}}{{e + 1}}">
      <input id="enum{{i+1}}{{e+1}}" [value]='enum.name' type="radio" name="enums{{i+1}}{{e+1}}" [(ngModel)]="radioSelected[i]">
      {{enum.name}}
    </label>
  </div>
</div>

    and change in component

    radioSelected:string[] = []

    At now you got you value in radioSelected array (radioSelected[0] for first radio bloc and radioSelected[ 1] for second block)

    Plunker