如何在单击已选择的项目时重置 mat-radio-group？ （切换功能）

Question

我有一个垫子无线电组中的项目列表。当我单击已选择的单选按钮时，我想要一个组范围的切换功能。

如果选择了 A 并且我单击 B，则B 被选中。

如果我点击B之后，那么什么都不会被选中

这是一个带有重置无线电组按钮的示例。当单击的单选按钮对应于已选择的值时，我希望有相同的行为

https://stackblitz.com/edit/reset-radio-value?file=src%2Fmain.ts

Answer 1

我们可以向元素添加一个点击事件

mat-radio-button

，我们评估逻辑以取消选中。

键盘事件不一致，您可能需要检查一下。

<mat-radio-group [ngModel]="radioValue" (ngModelChange)="changeRadio({}, $event)" aria-label="Select an option">
  <mat-radio-button tabindex="0" [value]="1" (click)="changeRadio($event, 1)">Option 1</mat-radio-button>
  <mat-radio-button tabindex="0" [value]="2" (click)="changeRadio($event, 2)">Option 2</mat-radio-button>
</mat-radio-group>

我们只需检查前一个值是否与当前值匹配，然后将其设置为

null

。

changeRadio(e: any, radioSelected: number) {
  e?.preventDefault();
  e?.stopPropagation();
  if (this.radioValue && this.radioValue === radioSelected) {
    this.radioValue = null;
    return;
  }
  this.radioValue = radioSelected;
}

完整代码：

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { MatRadioModule } from '@angular/material/radio';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <mat-radio-group [ngModel]="radioValue" (ngModelChange)="changeRadio({}, $event)" aria-label="Select an option">
      <mat-radio-button tabindex="0" [value]="1" (click)="changeRadio($event, 1)">Option 1</mat-radio-button>
      <mat-radio-button tabindex="0" [value]="2" (click)="changeRadio($event, 2)">Option 2</mat-radio-button>
    </mat-radio-group>
    <br>
    <button (click)="radioValue=null">Reset</button>
  `,
  imports: [FormsModule, MatRadioModule],
})
export class App {
  name = 'Angular';
  radioValue: number | null = null;

  changeRadio(e: any, radioSelected: number) {
    e?.preventDefault();
    e?.stopPropagation();
    if (this.radioValue && this.radioValue === radioSelected) {
      this.radioValue = null;
      return;
    }
    this.radioValue = radioSelected;
  }
}

bootstrapApplication(App);

Stackblitz 演示