Angular2：如何让第二个按钮成为表单回车默认触发的提交按钮

刚好之前在项目里遇到过一模一样的问题！想要保持「取消-提交」的显示顺序，同时让回车默认触发提交按钮，有几个简单靠谱的方案，给你参考：

方法1：给取消按钮指定type="button"（最优解） #

这是最简单直接的方案，完全符合HTML表单的原生规则。

默认情况下，表单里未指定type的按钮会被浏览器视为type="submit"，所以回车时会触发第一个submit类型的按钮。我们只需要给取消按钮明确设置type="button"，把它排除在表单的默认提交逻辑之外，这样回车就只会触发type="submit"的提交按钮了。

示例代码：

<form (ngSubmit)="handleSubmit()">
  <!-- 你的表单输入控件 -->
  <input type="text" name="username" [(ngModel)]="username" />

  <!-- 取消按钮：指定type="button"，不会被表单默认回车触发 -->
  <button type="button" (click)="handleCancel()">取消</button>
  <!-- 提交按钮：默认type为submit，自动成为回车默认触发项 -->
  <button type="submit">提交</button>
</form>

这个方案不需要额外的TypeScript逻辑，完全靠原生HTML属性解决问题，是最推荐的做法。

方法2：手动监听回车事件触发提交按钮 #

如果因为某些特殊原因不能修改取消按钮的type，可以通过监听表单的回车事件，手动触发提交按钮的点击逻辑，同时阻止默认行为。

首先在模板里给提交按钮加一个模板引用变量，然后监听表单的keydown.enter事件：

<form (ngSubmit)="handleSubmit()" (keydown.enter)="handleEnterKey($event)">
  <!-- 表单输入控件 -->
  <input type="text" name="username" [(ngModel)]="username" />

  <button (click)="handleCancel()">取消</button>
  <!-- 给提交按钮加模板引用变量 -->
  <button #submitBtn type="submit">提交</button>
</form>

然后在组件类里通过@ViewChild获取按钮实例，手动触发点击：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-form',
  templateUrl: './your-form.component.html'
})
export class YourFormComponent {
  username = '';

  @ViewChild('submitBtn') submitBtn!: ElementRef<HTMLButtonElement>;

  handleSubmit() {
    // 你的提交逻辑
    console.log('表单提交');
  }

  handleCancel() {
    // 你的取消逻辑
    console.log('取消操作');
  }

  handleEnterKey(event: KeyboardEvent) {
    // 阻止默认的回车行为（避免触发取消按钮）
    event.preventDefault();
    // 手动触发提交按钮的点击事件
    this.submitBtn.nativeElement.click();
  }
}

这个方案稍微繁琐一点，但适合有特殊场景限制的情况。

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