Angular中阻止回车键触发按钮提交并绑定至其他函数

我明白你的需求——不想让回车键默认触发对话框的关闭按钮，而是绑定到你自己的函数上。你尝试用HostListener的思路是对的，不过可能需要调整细节来确保事件被正确捕获并阻止默认行为。下面是具体的实现步骤：

1. 在组件类中添加HostListener捕获回车键 #

首先在你的对话框组件类里，通过HostListener监听回车键按下事件，同时阻止默认行为并调用自定义函数：

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

@Component({
  selector: 'your-dialog-component',
  templateUrl: './your-dialog.component.html'
})
export class YourDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<YourDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  // 监听回车键按下事件
  @HostListener('keydown.enter', ['$event'])
  onEnterKeyPress(event: KeyboardEvent): void {
    // 阻止默认的回车行为（比如触发默认按钮）
    event.preventDefault();
    event.stopPropagation();

    // 调用你的自定义函数
    this.handleCustomEnterAction();
  }

  // 自定义的回车键触发逻辑
  handleCustomEnterAction(): void {
    console.log('回车键触发了自定义操作！');
    // 这里写你需要的业务逻辑，比如提交表单、执行计算等
    // 如果需要关闭对话框，也可以在这里调用：this.dialogRef.close();
  }
}

2. 关闭对话框的默认按钮聚焦行为 #

Angular Material对话框默认会自动聚焦到第一个带有matDialogClose的按钮，这也是回车键会触发它的核心原因之一。你可以在打开对话框时设置autoFocus: false来禁用这个行为：

// 在打开对话框的父组件中
openDialog(): void {
  const dialogRef = this.dialog.open(YourDialogComponent, {
    autoFocus: false, // 禁用自动聚焦到默认按钮
    data: { content: '你的对话框内容' }
  });
}

3. 确保模板中的按钮类型正确 #

你模板里已经给按钮设置了type="button"，这一点非常重要——如果是type="submit"，即使阻止了回车键，表单的默认提交行为可能还是会干扰你的逻辑，保持type="button"就没问题：

<mat-dialog-content class="dialog-content">{{data.content | translate}}</mat-dialog-content>
<div>
  <mat-button-toggle-group>
    <button type="button" matDialogClose (click)="dialogRef.close()">{{uppercase }}</button>
    <!-- 其他按钮 -->
  </mat-button-toggle-group>
</div>

这样组合下来，回车键就会完全按照你的意愿触发自定义函数，而不会默认关闭对话框了。如果还有问题，可以检查事件是否被其他元素捕获（比如内部的表单或输入框），这时候可能需要在更上层的元素监听事件，或者使用event.stopImmediatePropagation()来确保你的处理逻辑优先执行。

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