如何使 mat-dialog 中的按钮也可以在 Enter 上工作？

Question

我有一个 mat-dialog-box 单击事件它会关闭对话框，但我希望它在 Enter 按下时也能正常工作。有什么办法吗？

我试过使用表格但没有用。以下是我尝试使用的解决方案：

HTML

<form (submit)="doAction()">
   <button type="submit">Add</button>
</form>

TS

doAction() {
  this.dialogRef.close({ event: this.action, data: this.local_data });
}

但是 Enter 事件没有发生，尽管点击它正在提交数据。如果我采用上述 HTML 方法，也适用于 Enter 正常形式（不在对话框中）。

任何人都可以提出这个问题吗？

Answer 1

在你的对话框组件中添加一个 HostListener，像这样（一个完整但简单的组件）：

一个完整的工作示例here。

HTML

<p>
my-dialog works!
</p>

<form (submit)="close()">
  <input type="text">
   <button type="submit">Add</button>
</form>

<button mat-button (click)="close()">Close</button>

TS

import { Component, HostListener, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<MyDialogComponent>) { }

  @HostListener('window:keyup.Enter', ['$event'])
  onDialogClick(event: KeyboardEvent): void {
    this.close();
  }
}

ngOnInit() {
}

close(): void {
  this.dialogRef.close(true);
}

}

Answer 2

无论您希望在单击 'Enter' 按钮时调用该函数，只需将此事件与（单击）事件一起添加即可

(keypress.enter)="yourFunction($event)"

这非常有效。

按钮工作的实际键盘事件是通过单击空格键。

如果你的需求肯定是回车键，那就加

(keypress.enter)="yourFunction($event)"

否则只需添加

(keypress)="yourFunction($event)"

按键事件适用于 keyUp 和 keyDown 事件。仅供参考

如何使 mat-dialog 中的按钮也可以在 Enter 上工作？

How to make button in mat-dialog work on Enter also?

typescript

angular-material

angular-material2

angular