如何编程更改mat-button-toggle组状态

Question

我正在尝试使用确认对话框更改MatbuttontoogleGroup状态，但是我找不到一种防止默认行为的方法（仅当我在CANCAL上更改为先前的状态时）。

html文件：

<mat-button-toggle-group [value]="value" (change)="onChange($event)">
  <mat-button-toggle [value]="StatusType.Open">
    Open
  </mat-button-toggle>
  <mat-button-toggle [value]="StatusType.Closed">
    Closed
  </mat-button-toggle>
</mat-button-toggle-group>

ts file：

@Input() value: StatusType;
@Output() statusChange = new EventEmitter<StatusType>();

onChange(event: MatButtonToggleChange): void {
   const newValue = event.value;

    if (newValue === StatusType.Open) {
      this.statusChange.emit(value);

      return;
    }

    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      data: {
        title: 'Confirm status change',
        message: 'Are you sure?',
      }
    });

    dialogRef
      .afterClosed()
      .pipe(
        untilDestroyed(this),
        filter((result) => !!result)
      )
      .subscribe(() => {
        this.statusChange.emit(newValue);
      });
}

我实际需要的是在onChange函数的开头添加event.preventDefault（），但是matbuttontoggglechange 事件没有destrestdefault（）方法，因为在幕后它实现了controlValueAccessor。

Answer 1

您可以尝试做的事情是使用ngmodel。您可以在组或所有切换按钮上添加ClickListener，然后打开对话框。用户确认对话框后，您可以设置模型。

html文件

<mat-button-toggle-group [(ngModel)]="value" (change)="onChange($event)">
  <mat-button-toggle [value]="StatusType.Open" (click)="onClick($event)">
    Open
  </mat-button-toggle>
  <mat-button-toggle [value]="StatusType.Closed" (click)="onClick($event)">
    Closed
  </mat-button-toggle>
</mat-button-toggle-group>

ts文件

  onClick(event: any): void {
    const newValue = event.value;

    if (newValue === StatusType.Open) {
      this.statusChange.emit(value);

      return;
    }

    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      data: {
        title: 'Confirm status change',
        message: 'Are you sure?',
      }
    });

    dialogRef
      .afterClosed()
      .pipe(
        untilDestroyed(this),
        filter((result) => !!result)
      )
      .subscribe(() => {
        this.statusChange.emit(newValue);
      });
  }

这是一个stackblitz，其中一个示例很少：
https://stackblitz.com/edit/angular-layjkm?file=src%2fapp%2fbutton-toggle-appearance-example.ts

Answer 2

这将需要重新分配到类型 matbuttontogglechange 的内部状态。在组中需要使用 ngmodel 来设置默认选择。您可以浏览已发出的活动的所有属性并使用它。

这类骇客应被视为最后的度假胜地，而更好的UX解决方案或组件选择将解决问题的根本原因

<mat-button-toggle-group color="primary" (change)="changeItem($event)"
            [ngModel]="selectedItem">
            <mat-button-toggle [checked]="selectedItem.id === item.id" [value]="item" color="primary"
                *ngFor="let item of items">
                {{ item.label }}
            </mat-button-toggle>
        </mat-button-toggle-group>

changeItem(event: MatButtonToggleChange): void {
      const clickedOption = event.source.value;
      if (!confirm('Are you sure to change ?')) {
          event.source.buttonToggleGroup.value = this.selectedItem
      } else {
          this.selectedItem = event.source.buttonToggleGroup.value;
      }
}

这是Stackblitz示例 https://stackblitz.com/edit/angular-xjn6ga-yxwytq?file=main.ts 。与Angular 13这样的最新版本也可以正常工作。