Multiple radio button groups in one Angular Reactive form

Question

I see answers for this issue with Template forms. But none that address this scenario with FormGroups in Reactive Forms.

When I select a radio button from one form on the page, it deselects the default radio button in a completely separate form and FormGroup. Why is this, and how do I fix it? (I have deliberately separated everything, even the method call)

Here's the stackblitz: Stackblitz

Answer 1

A radio buttons are grouped by name, In your example you are not providing any name so all the radio buttons are grouped as a single radio group.Add name to each radio button to avoid deselecting others.

<div class="rb-wrapper">
  <input
    [id]="id"
    type="radio"
    [name]="name"
    [value]="value"
    [formControl]="ctrl"
    [checked]="checked"
  />
  <p>
    {{ label }}
  </p>
</div>

Forked Working Example