Angular 14响应式表单单选按钮无法绑定选中值求助

你的问题出在没有用mat-radio-group包裹单选按钮组，Angular Material的单选按钮需要通过mat-radio-group来统一管理表单控件绑定，而非给每个mat-radio-button单独设置formControlName。

修正后的代码： #

<mat-radio-group [formControlName]="item?.name">
  <mat-radio-button *ngFor="let element of item?.data" [value]="element?.id">
    {{ element?.name }}
  </mat-radio-button>
</mat-radio-group>

关键说明： #

• mat-radio-group作为单选按钮的容器，承担formControlName的绑定，它会自动将选中按钮的value同步到对应表单控件中。
• 单个mat-radio-button仅需设置[value]，指定该选项对应的值即可。
• 确保对应表单控件的初始值与某个element?.id的类型完全匹配（比如同为数字或字符串），否则初始选中状态也会失效。

修改后切换单选按钮时，form.value就能正常同步选中值，和文本框的行为保持一致。

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