Angular动态加载数据时，如何为habits数组单选框设默认值为No？

问题说明 #

你在Angular项目中动态加载habits数组，通过表格搭配Yes/No单选按钮展示数据，但当前用[checked]="true"设置默认选中的方式可能不生效——因为Reactive Forms会接管表单控件的状态，原生属性会被表单控件的值覆盖。

正确解决方案 #

要实现默认选中“No”，需要通过FormControl设置默认值来实现，具体步骤如下：

1. 移除原生checked属性
   先删除No单选框上的[checked]="true"，避免和表单控件状态冲突：

<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="isMainHabitNo{{ x }}" value="0" name="habitsSufferedMain{{ x }}" formControlName="habitsSufferedMain{{ x }}" />
  <label class="custom-control-label" for="isMainHabitNo{{ x }}">No</label>
</div>

2. 在组件中初始化表单控件默认值
   当masterDate.data.habits数据加载完成后，遍历数组为每个单选框对应的FormControl设置默认值为'0'（注意是字符串，和input的value类型保持一致）。假设你的表单是FormGroup类型的habitsForm，示例代码如下：

import { FormBuilder, FormGroup } from '@angular/forms';

// 组件类中
habitsForm!: FormGroup;

constructor(private fb: FormBuilder) {}

// 数据加载完成后执行的方法（比如在ngOnInit或数据订阅回调中）
initHabitsForm() {
  this.habitsForm = this.fb.group({});
  // 遍历habits数组，添加表单控件并设置默认值
  this.masterDate.data.habits.forEach((habit, index) => {
    // 为单选框设置默认值'0'（对应No选项）
    this.habitsForm.addControl(`habitsSufferedMain${index}`, this.fb.control('0'));
    // 初始化习惯ID控件
    this.habitsForm.addControl(`habitsSufferedMainId${index}`, this.fb.control(habit.id));
    // 初始化详情文本框
    this.habitsForm.addControl(`habitsSufferedMainReason${index}`, this.fb.control(''));
  });
}

3. 确保表单绑定正确
   在表格外层绑定这个FormGroup，确保表单控件能正确关联：

<form [formGroup]="habitsForm">
  <!-- 你的表格代码 -->
</form>

原理说明 #

Angular的Reactive Forms会完全接管表单控件的状态，包括选中状态。当你为FormControl设置默认值'0'后，框架会自动匹配对应value="0"的单选框并将其设为选中状态，这种方式比原生checked属性更可靠，尤其适配动态生成表单的场景。

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