Angular响应式表单中如何设置单选按钮默认值

你遇到的问题本质是响应式表单的模型驱动特性和模板DOM状态脱节了——你用[checked]="true"手动选中了单选按钮，但这个操作没有同步到FormControl的模型值，所以提交时还是初始设置的空字符串。

响应式表单是靠组件类中的FormControl实例来管理状态的，模板只是状态的投影，正确的做法应该从模型层设置默认值，而不是直接操作DOM的checked属性。下面给你两种可行的方案：

方案一：初始化表单时直接设置默认值 #

在构建FormGroup的时候，把skill控件的初始值设为你想要默认选中的选项（也就是skillsForBackend[0]），这样视图会自动和模型同步，不需要在模板里加[checked]属性：

修改后的模板代码 #

<form [formGroup]="form" (ngSubmit)="onSubmit(form)" class="actionsForm">
  <input type="radio" id="entertainCrowdSkill1" [value]="skillsForBackend[0]" class="radiobuttons" formControlName="skill">
  <input type="radio" id="entertainCrowdSkill2" [value]="skillsForBackend[1]" class="radiobuttons" formControlName="skill">
</form>

修改后的组件代码 #

ngOnInit() {
  this.form = this.fb.group({
    // 直接把默认值设为skillsForBackend[0]
    skill: [this.skillsForBackend[0], Validators.required],
  });
}

onSubmit(form) {
  console.log(form.controls.skill.value) // 现在会正确输出skillsForBackend[0]的值
}

方案二：动态设置默认值（适合异步场景） #

如果你的选项数据是异步获取的（比如从API加载），没法在初始化表单时直接设置默认值，可以在数据加载完成后，用patchValue或setValue方法更新FormControl的值：

// 假设在API回调或数据加载完成后执行
this.loadSkills().subscribe(skills => {
  this.skillsForBackend = skills;
  // 更新表单控件的默认值
  this.form.get('skill').patchValue(this.skillsForBackend[0]);
});

为什么原来的方法无效？ #

响应式表单中，FormControl的value是唯一的状态源，模板里的[checked]只是修改了DOM的视觉状态，但没有触发FormControl的value更新，所以表单模型里始终是你初始化时设置的空字符串，提交自然就输出空了。

另外要注意：在响应式表单里，尽量不要混合使用模板驱动的属性（比如checked、ngModel）和formControlName，很容易出现状态不同步的问题，坚持用模型驱动的方式来管理表单状态就不会踩这类坑。

内容的提问来源于stack exchange，提问作者Willem van der Veen