Angular多组单选按钮联动异常：求各组选中值互不干扰的方案

你遇到的核心问题主要有两个：

1. 所有单选按钮共用了同一个name="vehicle"属性，浏览器会把这些单选按钮判定为同一组，导致选中其中一组的选项时，其他组的选中状态会被强制取消。
2. 表单控件绑定逻辑有误，没有为每组单选按钮分配独立的表单控件，进一步加剧了选中状态的干扰问题。

下面是具体的修复步骤：

1. 修复单选按钮分组与表单绑定 #

修改模板代码，为每组单选按钮设置唯一的name属性，并正确绑定表单数组的对应控件：

<div *ngFor="let groupIndex of [0,1,2,3]">
  <label *ngFor="let vehicle of vehicleList" class="radio">
    <input 
      type="radio" 
      [id]="'radio-' + groupIndex + '-' + vehicle.name"
      [value]="vehicle" 
      (change)="updateValues(formArray.value, groupIndex)"
      [name]="'vehicle-group-' + groupIndex"  <!-- 每组分配唯一name，确保分组独立 -->
      [formControlName]="groupIndex"  <!-- 绑定表单数组对应索引的控件 -->
      [disabled]="vehicle.total_no === 0"  <!-- 直接禁用total_no为0的选项 -->
    >
    {{vehicle.name}} ({{vehicle.total_no}})
  </label>
</div>

这里的关键修改：

• 为每个单选按钮生成唯一id，避免DOM元素id重复
• 每组单选按钮的name设置为vehicle-group-{{groupIndex}}，让四组单选按钮完全独立
• 通过[disabled]直接判断vehicle.total_no === 0来禁用选项，无需额外复杂逻辑
• formControlName绑定到循环的groupIndex，对应表单数组中的第N个独立控件

2. 优化updateValues函数逻辑 #

建议维护一份车辆数据的副本（避免污染原始数据源），同时简化选中值的更新逻辑：

// 组件内初始化：复制原始车辆数据作为视图用副本
vehicleList: any[] = [...this.vehicles];
// 初始化四组的历史选中值，对应四组单选按钮
_prevSelectedVehicles: any[] = new Array(4).fill(null);

updateValues(formArrayValue: any[], groupIndex: number) {
  const currentSelected = formArrayValue[groupIndex];
  const prevSelected = this._prevSelectedVehicles[groupIndex];

  // 恢复上一次选中车辆的total_no
  if (prevSelected) {
    const targetVehicle = this.vehicleList.find(v => v.name === prevSelected.name);
    if (targetVehicle) targetVehicle.total_no += 1;
  }

  // 扣减当前选中车辆的total_no
  if (currentSelected) {
    const targetVehicle = this.vehicleList.find(v => v.name === currentSelected.name);
    if (targetVehicle) targetVehicle.total_no -= 1;
    // 深拷贝保存当前选中值，避免引用关联导致的异常
    this._prevSelectedVehicles[groupIndex] = {...currentSelected};
  } else {
    this._prevSelectedVehicles[groupIndex] = null;
  }

  // 执行你的updateTime逻辑
  this.updateTime(formArrayValue, formArrayValue);
}

优化点说明：

• 使用find替代indexOf匹配车辆，避免对象引用比较导致的匹配失败
• 深拷贝当前选中的车辆对象，防止后续修改原始对象时影响历史记录
• 用独立的vehicleList副本处理视图数据，保护原始数据源不被污染

3. 确保FormArray正确初始化 #

在组件初始化时，要创建包含4个独立控件的表单数组：

formArray = new FormArray([
  new FormControl(null),
  new FormControl(null),
  new FormControl(null),
  new FormControl(null)
]);

这样每组单选按钮都会对应表单数组中的一个独立控件，选中状态完全互不干扰。

完成以上修改后，四组单选按钮就会完全独立运作，选中其中一组的选项不会影响其他组，同时total_no的更新和选项禁用逻辑也能正常生效。

内容的提问来源于stack exchange，提问作者Sreeraag Mohan