Angular Material中mat-radio-button表单值访问器问题排查

你判断的原因没错——mat-radio-group必须绑定对应的表单控件才能和FormArray中的isFavorite字段关联，否则Angular无法找到控件路径，就会抛出NG01203错误。以下是具体解决步骤：

1. 确保FormArray中存在isFavorite控件 #

先检查TS代码里的表单初始化逻辑，确保每个FormGroup都包含isFavorite控件：

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

// 组件类内的表单初始化
constructor(private fb: FormBuilder) {}

myForm!: FormGroup;

ngOnInit(): void {
  this.myForm = this.fb.group({
    items: this.fb.array([this.createItem(), this.createItem()]) // 可按需添加多个初始项
  });
}

// 创建单个表单项的方法
createItem(): FormGroup {
  return this.fb.group({
    name: ['', Validators.required],
    rateValue: [0, Validators.min(0)],
    isFavorite: [false] // 必须包含该控件，初始值可按需设置
  });
}

// 便捷获取FormArray的getter
get items(): FormArray {
  return this.myForm.get('items') as FormArray;
}

2. 给mat-radio-group绑定formControlName #

在HTML模板中，给mat-radio-group而非单个mat-radio-button设置formControlName="isFavorite"，单选按钮仅需定义value即可：

<form [formGroup]="myForm">
  <div formArrayName="items">
    <!-- 遍历所有表单项 -->
    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
      <!-- 正常工作的name和rateValue控件 -->
      <input formControlName="name" placeholder="名称" />
      <input type="number" formControlName="rateValue" placeholder="评分" />

      <!-- 正确绑定isFavorite的单选组 -->
      <mat-radio-group formControlName="isFavorite">
        <mat-radio-button [value]="true">设为收藏</mat-radio-button>
        <mat-radio-button [value]="false">取消收藏</mat-radio-button>
      </mat-radio-group>
    </div>
  </div>
</form>

关键注意事项 #

• 不要给单个mat-radio-button添加formControlName，单选组的状态由mat-radio-group统一管理，单个按钮仅负责提供选项值。
• 若需动态添加表单项，调用items.push(this.createItem())即可，新项会自动包含isFavorite控件。

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