如何阻止Angular Material Select按回车展开，实现回车提交表单？

在mat-dialog内的表单需求：表单验证通过时按回车键提交（关闭对话框并将表单值传递到afterClose Promise）。但表单中的多个mat-select会劫持回车键展开下拉菜单，当前绑定keydown事件的方案存在两个问题：

• 对话框关闭前会短暂展开下拉菜单
• 表单无效时，按下回车仍会展开下拉菜单

需要禁用mat-select的回车展开行为，同时保留控件的其他键盘导航功能。

方法一：改进现有keydown事件处理器 #

核心是在按下回车键时，先阻止默认行为和事件冒泡，彻底阻断mat-select的展开逻辑，再根据表单状态处理提交逻辑。

修改组件中的submitOnEnter方法：

public submitOnEnter(event: KeyboardEvent): void {
  if (event.key === 'Enter') {
    // 阻止默认行为（避免展开下拉）+ 阻止事件冒泡（阻断Material内部处理）
    event.preventDefault();
    event.stopPropagation();
    
    if (this.formGroup.valid) {
      this._dialogRef.close(this.formGroup.value);
    } else {
      // 可选：标记所有表单控件为已触碰，触发错误提示
      this.formGroup.markAllAsTouched();
    }
  }
}

HTML部分无需修改，保持原有的(keydown)="submitOnEnter($event)"绑定即可。

方法二：封装为指令（更优雅的复用方案） #

如果多个mat-select需要该逻辑，可以封装成Angular指令，避免重复绑定事件：

1. 创建指令文件enter-submit.directive.ts：

import { Directive, HostListener, Inject } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';

@Directive({
  selector: '[enterSubmit]'
})
export class EnterSubmitDirective {
  constructor(
    @Inject(FormGroup) private formGroup: FormGroup,
    private dialogRef: MatDialogRef<any>
  ) {}

  @HostListener('keydown.enter', ['$event'])
  onEnter(event: KeyboardEvent): void {
    event.preventDefault();
    event.stopPropagation();
    
    if (this.formGroup.valid) {
      this.dialogRef.close(this.formGroup.value);
    } else {
      this.formGroup.markAllAsTouched();
    }
  }
}

2. 在模块中声明该指令，然后在mat-select上使用：

<mat-select formControlName="language"
            enterSubmit
            [panelClass]="colorClass()">
  @for (language of languages(); track language.id) {
    <mat-option [value]="language">{{language.title}}</mat-option>
  }
</mat-select>

关键原理 #

Angular Material的mat-select会监听回车键触发下拉面板展开，通过event.preventDefault()阻止默认行为，event.stopPropagation()阻断事件向上冒泡到Material内部的处理器，就能彻底禁用该行为，同时不影响方向键选择选项等其他键盘导航功能。

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