Angular实现MatDialog中按回车键提交表单的方案

要实现MatDialog内任意元素聚焦时按回车都提交表单，你可以通过以下两种可靠方法解决：

方法一：给Dialog根容器绑定全局回车事件 #

直接在Dialog组件的最外层容器上绑定keyup.enter事件，利用事件冒泡特性，不管内部哪个元素触发回车，最终都会触发根容器的事件：

修改Dialog组件的HTML代码（注意修正按钮的saveUser为TS里的save）：

<div class="flex-c justify-center full-height padding-l" (keyup.enter)="save()">
  <label class="title-2">Create user</label>
  <div class="flex-c full-size padding-l gap-l">
    <div>
      <form [formGroup]="formData" class="user-form">
        <div>
          <mat-form-field>
            <mat-label>Name</mat-label>
            <input type="text" matInput formControlName="name" />
          </mat-form-field>
        </div>
        <div>
          <mat-form-field>
            <mat-label>Age</mat-label>
            <input type="number" matInput formControlName="age" />
          </mat-form-field>
        </div>
      </form>
    </div>
    <mat-dialog-actions>
      <button mat-button color="warn" (click)="cancel()">cancel</button>
      <button (click)="save()" cdkFocusInitial>save</button>
    </mat-dialog-actions>
  </div>
</div>

这种方法简单直接，不需要额外的TS逻辑，只要确保根容器能捕获所有内部元素的回车事件即可。

方法二：全局键盘监听（更灵活） #

如果需要更精细的控制（比如判断表单是否可提交后再触发），可以在Dialog组件中监听全局的回车事件，同时在组件销毁时移除监听避免内存泄漏：

修改Dialog组件的TS代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { FormGroup, FormControl, Validators } from '@angular/forms';

export class EditUserComponent implements OnInit, OnDestroy {
  public formData = new FormGroup({
    name: new FormControl('', Validators.required),
    age: new FormControl('', Validators.required),
  });
  private keyupListener: Function;

  constructor(public dialogRef: MatDialogRef<EditUserComponent>) {}

  ngOnInit() {
    // 监听全局回车事件
    this.keyupListener = (event: KeyboardEvent) => {
      if (event.key === 'Enter') {
        // 检查当前聚焦元素是否在Dialog内部
        const dialogElement = this.dialogRef._containerInstance._elementRef.nativeElement;
        if (dialogElement.contains(document.activeElement)) {
          this.save();
        }
      }
    };
    document.addEventListener('keyup', this.keyupListener);
  }

  ngOnDestroy() {
    // 移除监听
    document.removeEventListener('keyup', this.keyupListener);
  }

  public cancel() {
    this.dialogRef.close();
  }

  public save() {
    if (this.formData.valid) {
      console.log('User is updated');
      // 这里可以添加提交逻辑，比如关闭Dialog返回数据
      this.dialogRef.close(this.formData.value);
    }
  }
}

额外注意点 #

1. 修正代码中的方法名不一致：HTML里的按钮(click)="saveUser()"要改成(click)="save()"，和TS里的方法名统一。
2. 如果表单中有默认会响应回车的元素（比如textarea），可以在这些元素上添加(keydown.enter)="$event.preventDefault()"来阻止默认行为，避免冲突。

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