如何在Angular Stepper中按下回车键从步骤1跳转至下一个步骤

实现逻辑 #

利用Angular内置的按键事件修饰符监听表单区域的回车事件，校验第一步表单合法性后调用Stepper的next()方法完成跳转，完全对齐原有点击下一步按钮的交互逻辑。 #

具体修改步骤 #

1. 修改第一步表单的模板代码 #

找到第一步的<form>标签，添加回车事件绑定：

<!-- 原form标签新增(keyup.enter)事件 -->
<form [formGroup]="firstFormGroup" (keyup.enter)="goToNextStep()">

注：事件绑定在form标签上的好处是整个第一步表单范围内的所有输入框按回车都会触发跳转逻辑，无需给每个input单独绑定，维护成本更低。

2. 修改TS业务逻辑代码 #

新增跳转方法，先校验表单合法性再执行跳转：

// 若组件内还未声明Stepper实例，先添加下面这行代码
@ViewChild(MatStepper) stepper!: MatStepper;

// 新增回车触发的跳转方法
goToNextStep() {
  // 只有第一步表单校验通过才允许跳转，和原有按钮显示逻辑保持一致
  if (this.firstFormGroup.valid) {
    // 无需处理性别逻辑直接调用stepper跳转即可
    this.stepper.next();
    // 如果你需要保留原有radioChange的所有逻辑，替换为调用this.radioChange()即可
  }
}

兼容旧版本Angular方案 #

如果你使用的Angular版本不支持keyup.enter按键修饰符，改用通用按键事件判断即可：

模板修改 #

<form [formGroup]="firstFormGroup" (keyup)="handleKeyUp($event)">

TS新增方法 #

handleKeyUp(event: KeyboardEvent) {
  // 同时兼容新旧浏览器的回车判断逻辑
  if ((event.key === 'Enter' || event.keyCode === 13) && this.firstFormGroup.valid) {
    this.stepper.next();
  }
}

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