angularradio-buttonradio-group

Multiple radio button groups all toggle on the same click

In my angular app I just tried to create multiple radio-button groups. A group looks like this:

<input [formControl]="ctrlx" type="radio" [value]="true" id="idx"    
  autocomplete="off"/>
<label for="idx">Yes</label>

<input [formControl]="ctrlx" type="radio" [value]="false" id="idy"
  autocomplete="off" />
<label for="idy">No</label>

DEMO

The weird thing is, as you can see in the demo, that when you click on one of the radio's all the other radio's change too. Somehow my radio groups are connected. Any suggestions what I do wrong here?

Solution

  • Just give each group a unique name

    <div>
  <input [formControl]="ctrlx" type="radio" [value]="true" id="idx" name="a"   
   autocomplete="off"/>
  <label for="idx">Yes</label>

  <input [formControl]="ctrlx" type="radio" [value]="false" id="idy" name="a"   
  autocomplete="off" />
  <label for="idy">No</label>
</div>