如何在 Angular 对话框材质中按转义键实现优雅地关闭表单？

Question

我有一个对话框表单，我希望当用户按下转义键时将其正常关闭。当用户按下转义键时，表单会立即关闭，但由于某种原因，对话框表单不会将结果发送到父表单。

通过取消按钮关机是没有问题的。

我已经在

userform

组件上尝试过使用“onKey”事件，但这也不起作用。

在我的打字稿和模板对话框文件中：

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

constructor(
  private dialogRef: MatDialogRef<UpdateBonusConditieComponent>,
  @Inject(MAT_DIALOG_DATA) private PassedData: ConditieTypeDialog,
) {}  // I also tried it with a public PassedData instead of private

onCancel() {
  console.log('komt ie hier');
  this.PassedData.cancel = true;
}

onKey(event: any) { 
  this.onCancel();
  console.log('toets ingedrukt ' + event.target);
}

onOK() {
  console.log('OK button pressed');
}

<mat-dialog-content [formGroup]="dialogConditieForm"
                    (keyup)="onKey($event)">

</mat-dialog-content>

<mat-dialog-actions>
  <button mat-button
          color="accent"
          (click)="onOK()"
          [mat-dialog-close]="PassedData"
          [disabled]="dialogConditieForm.invalid">Ok</button>
  <button mat-button
          color="warn"
          (click)="onCancel()"
          [mat-dialog-close]="PassedData">Cancel</button>
</mat-dialog-actions>

然后我有调用对话框的父表单，一些细节：

import { MatDialog } from '@angular/material';

constructor(private matDialog: MatDialog) {}

const dialogRef = this.matDialog.open(UpdateBonusConditieComponent, {
  data: {
    onderwerpGUI: onderwerpGUI,
    isNewRow: isNewRow,
    cancel: false,
  }
});

dialogRef.afterClosed().subscribe((result: ConditieTypeDialog) => {
  if (result.cancel) { //when hitting escape result is undefined for some reason
    this.selectedRow = null;
    return 0;
  }
});

我应该期待返回结果，以便将

this.selectedRow

设置为

null

，但如果使用转义键关闭对话框表单，则不会发生这种情况。

我想我做错了什么。有人可以帮助我吗？

Answer 1

对话框表单没有发送结果，因为

onKey

函数永远不会被调用。您可以改为订阅

keyboardEvents

中的

MatDialogRef

，并在单击

onCancel

时致电

Escape

。我还为

backdropClick

添加了相同的内容，因为这也是必需的。

constructor(
    private dialogRef: MatDialogRef<UpdateBonusConditieComponent>,
    @Inject(MAT_DIALOG_DATA) private passedData: ConditieTypeDialog,
) { }

ngOnInit() {
    this.dialogRef.keydownEvents().subscribe(event => {
        if (event.key === "Escape") {
            this.onCancel();
        }
    });

    this.dialogRef.backdropClick().subscribe(event => {
        this.onCancel();
    });
}

onCancel(): void {
    this.passedData.cancel = true;
    this.dialogRef.close(this.passedData);
}

onOK() {
    console.log('OK button pressed');
}

此外，按照约定，使用驼峰命名法作为变量名称 (

passedData

)。

Answer 2

  openSaveDialog() {
    this._matDialog.closeAll();
    const dataExist = {
      disableClose: true,
      width: '600px',
      backdropClass: 'transparent',
      cancel: false,
      data: { data: null, gridData: null }
    }
    this.submitModelRef = this._matDialog.open(SaveDetailsDialogComponent, dataExist);

    this.submitModelRef.afterClosed().subscribe(async (savedData) => {
      console.log(savedData);
    });
  }

参考：https://material.angular.io/components/dialog/api#MatDialogConfig

Answer 3

我找到了防止崩溃的解决方法。我通过在父组件中使用它来阻止按键：

const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data =  {
    onderwerpGUI: onderwerpGUI,
    isNewRow: isNewRow,
    cancel: false
}
});

const dialogRef = this.matDialog.open(UpdateBonusConditieComponent, dialogConfig);

也许有人可以用这个。 :-)