如何在独立事件触发后取消mat-radio-group中所有mat-radio-button的选中状态？

不用刷新页面，直接通过Angular的绑定机制就能搞定，分几种常见场景：

1. 模板驱动表单绑定场景 #

给mat-radio-group绑定ngModel，示例如下：

<mat-radio-group [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">选项1</mat-radio-button>
  <mat-radio-button value="option2">选项2</mat-radio-button>
</mat-radio-group>

组件内定义对应变量：

selectedValue: string | null = null;

提交事件触发时，直接将变量设为null：

onSubmit() {
  // 执行提交逻辑
  this.selectedValue = null;
}

这样单选组就会自动回到未选中状态。

2. 响应式表单场景 #

先在组件内定义表单控件：

import { FormGroup, FormControl } from '@angular/forms';

myForm = new FormGroup({
  radioOption: new FormControl(null)
});

模板中绑定表单组：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <mat-radio-group formControlName="radioOption">
    <mat-radio-button value="option1">选项1</mat-radio-button>
    <mat-radio-button value="option2">选项2</mat-radio-button>
  </mat-radio-group>
  <button type="submit">提交</button>
</form>

提交时重置对应控件的值：

onSubmit() {
  // 执行提交逻辑
  this.myForm.get('radioOption')?.setValue(null);
  // 若需重置整个表单，直接调用 this.myForm.reset();
}

3. 直接操作单选组实例场景 #

如果不想用表单绑定，可以通过ViewChild获取mat-radio-group实例：

import { ViewChild } from '@angular/core';
import { MatRadioGroup } from '@angular/material/radio';

@ViewChild(MatRadioGroup) radioGroup!: MatRadioGroup;

onSubmit() {
  // 执行提交逻辑
  this.radioGroup.value = null;
}

模板中的单选组无需额外绑定，确保组件能获取到实例即可。

核心逻辑：Angular Material的单选组通过value控制选中状态，将value设为null就能取消所有选项的选中，没必要操作DOM的checked属性，这才是符合Angular响应式思路的做法。

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