Angular响应式表单FormArray中如何用单选按钮切换true/false布尔值

原生单选按钮的默认互斥仅能更新单个绑定控件的值，无法自动同步FormArray同组其他控件的状态，按以下步骤实现即可：

1. 调整模板代码 #

移除原有写死的空value属性和直接绑定的formControlName，改用属性绑定控制选中状态、变更事件触发选值逻辑，保证交互语义符合单选预期：

<!-- 假设你的FormArray实例名为 answerOptions，通过*ngFor遍历生成每一项 -->
<div *ngFor="let item of answerOptions.controls; let idx = index" class="option-item">
  <input
    type="radio"
    name="correctAnswer"
    [checked]="item.get('correctAnswer').value === 'true'"
    (change)="selectCorrectAnswer(idx)"
  />
  <!-- 选项文本等其他表单项可正常绑定formControlName放在此处 -->
</div>

注意：所有单选按钮保持name属性一致，才能触发原生的单选互斥交互样式，避免出现可同时选中多个的视觉bug。

2. 组件类实现选值逻辑 #

写统一的选中处理方法，遍历FormArray重置所有项的状态，仅将当前选中项的值设为'true'，从数据层面保证同组永远只有一个选中值：

selectCorrectAnswer(selectedIdx: number): void {
  // 先将所有选项的correctAnswer值重置为'false'，加emitEvent:false避免触发多余的变更检测
  this.answerOptions.controls.forEach((control) => {
    control.get('correctAnswer').setValue('false', { emitEvent: false });
  });
  // 将当前选中项的值设为'true'
  this.answerOptions.at(selectedIdx).get('correctAnswer').setValue('true');
}

初始化注意事项 #

• 初始化FormArray子项时，correctAnswer控件的默认值统一设为'false'；如果需要默认选中第一项，在FormArray初始化完成后主动调用this.selectCorrectAnswer(0)即可。
• 如果你需要的是布尔类型的true/false而非字符串，只需要把setValue里的'true'/'false'去掉引号，同时模板里的checked判断去掉和字符串的比对，直接写[checked]="item.get('correctAnswer').value === true"即可。

这个方案不需要改用复选框，既保留了单选按钮的原生交互语义，又能保证FormArray存储的结构完全符合要求：每一项的correctAnswer字段直接存自身的选中状态，整个数组永远只有一项值为'true'，提交表单、监听值变更都可以直接拿到正确结果，不需要额外做数据转换。

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