Angular多单选按钮组点击全部联动异常问题求助

你的问题核心是所有单选组共用了同一个FormControl实例——不管是模板里重复绑定同一个ctrlx变量，还是组件类里没有为每个组创建独立的控制对象，都会导致任意一组的选择操作同步到所有关联的单选按钮上，形成联动。

解决方案 #

• 为每个组创建独立的FormControl
  在组件类中为每一组单选按钮定义单独的FormControl：

  // 组件.ts文件
  import { FormControl } from '@angular/forms';
  
  export class YourComponent {
    group1Ctrl = new FormControl(false);
    group2Ctrl = new FormControl(false);
    group3Ctrl = new FormControl(false);
  }
  

  模板中对应绑定不同的控制实例，同时确保每组内的单选按钮ID唯一：

  <!-- 第一组 -->
  <input [formControl]="group1Ctrl" type="radio" [value]="true" id="group1-yes" autocomplete="off">
  <label for="group1-yes">Yes</label>
  <input [formControl]="group1Ctrl" type="radio" [value]="false" id="group1-no" autocomplete="off">
  <label for="group1-no">No</label>
  
  <!-- 第二组 -->
  <input [formControl]="group2Ctrl" type="radio" [value]="true" id="group2-yes" autocomplete="off">
  <label for="group2-yes">Yes</label>
  <input [formControl]="group2Ctrl" type="radio" [value]="false" id="group2-no" autocomplete="off">
  <label for="group2-no">No</label>
  

• 动态生成组用FormArray管理
  如果是通过循环动态创建多个单选组，用FormArray来统一管理更高效：

  // 组件.ts文件
  import { FormArray, FormControl } from '@angular/forms';
  
  export class YourComponent {
    radioGroups = new FormArray([
      new FormControl(false),
      new FormControl(false),
      // 可根据需求添加更多组
    ]);
  }
  

  模板中配合*ngFor循环渲染：

  <div *ngFor="let ctrl of radioGroups.controls; let i = index">
    <input [formControl]="ctrl" type="radio" [value]="true" [id]="`group${i}-yes`" autocomplete="off">
    <label [for]="`group${i}-yes`">Yes</label>
    <input [formControl]="ctrl" type="radio" [value]="false" [id]="`group${i}-no`" autocomplete="off">
    <label [for]="`group${i}-no`">No</label>
  </div>
  

• 补充：配合原生name属性规范组行为
  为每组内的两个单选按钮设置相同的name属性（不同组的name要唯一），这能贴合浏览器原生单选组的行为逻辑，避免潜在的冲突：

  <!-- 第一组 -->
  <input [formControl]="group1Ctrl" type="radio" [value]="true" id="group1-yes" name="group1" autocomplete="off">
  <input [formControl]="group1Ctrl" type="radio" [value]="false" id="group1-no" name="group1" autocomplete="off">
  
  <!-- 第二组 -->
  <input [formControl]="group2Ctrl" type="radio" [value]="true" id="group2-yes" name="group2" autocomplete="off">
  <input [formControl]="group2Ctrl" type="radio" [value]="false" id="group2-no" name="group2" autocomplete="off">
  

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri