Angular中Mat-Radio-Button无法通过formControlName实现自动选中问题

1. 修复组件中的变量名错误 #

你在组件代码里犯了一个关键错误：把FormGroup实例覆盖了原本存储JSON数据的b2Data变量，导致后续数据丢失，这是单选按钮无法正常绑定的核心原因之一。修正后的组件代码如下：

// 先获取历史JSON数据，保留在b2Data变量中
this.b2Data = this.surveyServices.getSurvey(); 
// 初始化FormGroup，赋值给formGroup变量（不要覆盖b2Data）
this.formGroup = this.formBuilder.group({
  ambExclusivos: new UntypedFormControl(this.b2Data?.ambExclusivos),
  ambDormir: new UntypedFormControl(this.b2Data?.ambDormir, Validators.pattern(NUMERIC_PATTERN)),
  ambTrabajo: new UntypedFormControl(this.b2Data?.ambTrabajo),
  numAmbTrabajo: new UntypedFormControl(this.b2Data?.numAmbTrabajo, Validators.pattern(NUMERIC_PATTERN)),
  ambComplementarioCocina: new UntypedFormControl(this.b2Data?.ambComplementarioCocina),
  cocinaEnergia: new UntypedFormControl(this.b2Data?.cocinaEnergia),
});

2. 移除HTML中的[checked]绑定 #

当mat-radio-group通过formControlName绑定表单控件后，单选按钮的选中状态会由表单控件自动管理，手动添加[checked]会和表单控件的内置状态逻辑冲突，导致选中失效。另外要注意：如果ambTrabajo是布尔类型，需用[value]="true"绑定布尔值，而非value="true"（这会被解析为字符串，和布尔值类型不匹配）。修正后的HTML代码：

<mat-radio-group formControlName="ambTrabajo" name="ambTrabajo">
  <mat-radio-button name="si" color="accent" [value]="true">Sí</mat-radio-button>
  <mat-radio-button [value]="false">No</mat-radio-button>
</mat-radio-group>

3. 额外注意事项 #

• 确认b2Data?.ambTrabajo的类型是布尔值（true/false），如果接口返回的是字符串类型（"true"/"false"），需要在初始化表单控件时做类型转换，比如this.b2Data?.ambTrabajo === 'true'
• 如果getSurvey()是异步请求，要确保在数据返回后再初始化表单，避免因数据未加载导致的初始化失败

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