Angular Reactive Forms集成Angular Material单选按钮后逻辑失效求方案

从你的代码来看，核心问题是Angular Material单选组与Reactive Forms的绑定逻辑和原生单选按钮不同，调整模板绑定方式即可恢复原有表单逻辑。

具体修复步骤 #

1. 修正Material单选组件的表单绑定 #

在child.component.html中，需将formControlName绑定到<mat-radio-group>容器上，而非单个<mat-radio-button>：

<!-- 替换现有Material单选按钮代码 -->
<mat-radio-group formControlName="option">
  <mat-radio-button value="A">选项A</mat-radio-button>
  <mat-radio-button value="B">选项B</mat-radio-button>
</mat-radio-group>

原注释的原生单选是给每个input绑定formControlName，但Material单选组需要通过容器统一管理选中状态，单个单选按钮仅需设置value，选中值会自动同步到关联的表单控件。

2. 确认表单控件初始化逻辑 #

检查child.component.ts中的表单初始化代码，确保option控件的初始值与单选按钮的value匹配：

this.childForm = this.fb.group({
  option: ['A', Validators.required] // 初始值可根据需求调整为"A"或"B"
});

3. 验证父组件表单关联正确性 #

父组件通过formGroup和formGroupName关联子组件表单的逻辑是正确的，需确保父组件表单初始化时包含child分组：

this.parentForm = this.fb.group({
  child: this.fb.group({
    option: ['A', Validators.required]
  })
});

关键原理说明 #

Angular Material的mat-radio-group是状态管理容器，会统一处理内部单选按钮的选中状态，并将最终值同步到绑定的FormControl中。如果错误地将formControlName绑定到单个单选按钮，会导致多个控件关联到同一表单字段，引发状态混乱、值无法同步的问题。

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