Angular 17响应式表单：单选按钮加载时全选中，与布尔值不符

你的问题出在两个核心点：

1. 单选按钮组逻辑冲突：同一name属性的单选按钮属于互斥组，同一时间只能选中一个，但你给三个独立的FormControl绑定了相同的name，直接违背单选组设计规范，导致浏览器与Angular表单的选中状态判断混乱。
2. 值类型不匹配：HTML原生单选按钮的value是字符串类型，用[value]="value"绑定布尔值时，Angular会自动将其转为"true"或"false"字符串，但你的FormControl存储的是布尔类型（true/false），类型不匹配导致Angular无法正确判断选中状态。

方案1：三个单选为独立布尔开关（非互斥） #

如果三个单选分别对应三个独立的布尔值（可同时选中），需给每个单选设置唯一name，并修复值类型匹配问题：

子组件修改

用[checked]手动同步选中状态（避免类型不匹配问题）：

<div>   
  <input 
    type="radio" 
    [id]="radioItemId" 
    [name]="name" 
    [formControl]="_control" 
    [value]="value" 
    [checked]="_control.value === value"
    (change)="emitItem()"
  >   
</div>

若使用[value]="value.toString()"将布尔值转为字符串，需确保FormControl的初始值也为字符串类型（比如new FormControl("true")），否则仍会出现匹配问题。

父组件修改

给每个子组件设置唯一name，并修正value绑定逻辑（独立开关应直接绑定目标布尔值，而非取反）：

<div>
  <app-reactive-radio-select 
    [name]="'group-item1-' + index" 
    [radioItemId]="'hasSensor' + index"
    [control]="_slotsForm.controls['hasItem1']" 
    [value]="true" 
  >
  </app-reactive-radio-select>
  <app-reactive-radio-select 
    [name]="'group-item2-' + index" 
    [value]="true" 
    [radioItemId]="'hasItem2' + index"
    [control]="_slotsForm.controls['hasItem2']"
  >
  </app-reactive-radio-select>
  <app-reactive-radio-select 
    [name]="'group-item3-' + index" 
    [value]="true" 
    [radioItemId]="'hasItem3' + index"
    [control]="_slotsForm.controls['hasItem3']"
  >
  </app-reactive-radio-select>
</div>

这类独立布尔开关场景，优先使用checkbox而非radio，更符合用户交互习惯。

方案2：三个单选为互斥组（同一时间选一个） #

如果三个单选是同一组的互斥选项，需绑定同一个FormControl，每个单选设置不同value：

父组件修改

<div>
  <!-- 三个单选绑定同一个FormControl，name保持一致 -->
  <app-reactive-radio-select 
    [name]="'group-' + index" 
    [radioItemId]="'option1-' + index"
    [control]="_slotsForm.controls['selectedOption']" 
    [value]="true" 
  >
  </app-reactive-radio-select>
  <app-reactive-radio-select 
    [name]="'group-' + index" 
    [value]="false" 
    [radioItemId]="'option2-' + index"
    [control]="_slotsForm.controls['selectedOption']"
  >
  </app-reactive-radio-select>
  <app-reactive-radio-select 
    [name]="'group-' + index" 
    [value]="null" 
    [radioItemId]="'option3-' + index"
    [control]="_slotsForm.controls['selectedOption']"
  >
  </app-reactive-radio-select>
</div>

表单初始化时设置对应初始值：

_slotsForm = new FormGroup({
  selectedOption: new FormControl(true) // 初始值对应第一个单选
});

• 同一name的单选按钮必须绑定同一个FormControl，这是单选组的核心逻辑，否则必然出现状态混乱。
• 确保单选按钮的value类型与FormControl的value类型完全一致，避免字符串与布尔值的类型不匹配问题。

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