Multiple radio button groups all toggle on the same click

Question

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?

Answer 1

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>

Answer 2

Your HTML doesn't have a good structure. You should wrap everything in a form, use FormGroup for each form.

You first need to create a FormGroup and include all the FormControl. In this case, you only need a single formControl because it is share among the radios.

@Component({
  ...
})
export class ExampleComponent {
 
  choiceBGroup = new FormGroup({
    choiceB: new FormControl()
  });

  choiceAGroup = new FormGroup({
    choiceA: new FormControl()
  });

}

<form [formGroup]="choiceAGroup">
  <input formControlName="choiceA" type="radio"  value="true" id="ida"/>
  <label for="ida">Yes</label>

  <input formControlName="choiceA" type="radio" value="false" id="idb"/>
  <label for="idb">No</label>
</form>

<form [formGroup]="choiceBGroup">
  <input formControlName="choiceB" type="radio" value="true" id="ida1"/>
  <label for="ida1">Yes</label>

  <input formControlName="choiceB" type="radio" value="false" id="idb1"/>
  <label for="idb1">No</label>
</form>

Answer 3

If you would like to deal with 2 different radio groups in single form. This is how we need to deal with it. I am slightly modifying above answer.

@Component({
  ...
})
export class ExampleComponent {
myForm: FormGroup;
  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      choiceA = new FormControl(),
      choiceB = new FormControl();
    });
  }

}

<form [formGroup]="myForm">
  <input formControlName="choiceA" type="radio" name="choiceA" value="true" id="ida"/>
  <label for="ida">Yes</label>

  <input formControlName="choiceA" type="radio" name="choiceA" value="false" id="idb"/>
  <label for="idb">No</label>

<br/>

  <input formControlName="choiceB" type="radio" name="choiceB" value="true" id="ida1"/>
  <label for="ida1">Yes</label>

  <input formControlName="choiceB" type="radio" name="choiceB" value="false" id="idb1"/>
  <label for="idb1">No</label>
</form>

Answer 4

You forgot the attribute name in your inputs type radio.

As you have a custom form control you can is similar to this answer

1. Declare outside your component a variable, e.g. myformNextUniqueId
2. Create a variable name using this myFormNextUniqueId

Some similar to:

let myformNextUniqueId = 0; //<--outside the component
@Component({
  selector: 'app-checkbox',
  ...
})
export class CheckboxComponent implements ControlValueAccessor {
  name:string="radio"+(myformNextUniqueId++) //<--create a variable "name"

  //you use this "name" to give value to yours ids
  id1 = this.name+'true';
  id2 = this.name+'false';
  ...
}

Then use it in your .html

<input [formControl]="ctrl" [id]="id1"
    ...
    [name]="name"
/>
<label ...>yes</label>
<input [formControl]="ctrl" [id]="id2"
    ...
    [name]="name"
/>
<label ...>no</label>

NOTE: You can also force the user indicate as attribute the name of the control

constructor(@Optional() @Attribute('name') public name:string){
    if (!name)
      throw new Error("The name attribute it's necessary")
}