Angular Material mat-stepper的@Output('interacted')事件不触发如何正确绑定？

核心原因 #

• interacted 事件的触发逻辑是用户尝试离开当前步骤但切换失败时才会触发，不是每次步骤切换都会触发。你当前步骤A的表单验证通过，可以正常切换到步骤B，此时只会触发selectionChange，不会触发interacted。
• 你给出的HTML代码中第一个<mat-step>标签末尾遗漏了闭合符>，属于语法错误，也会导致事件绑定失效。

正确使用方式 #

1. 修正HTML语法错误，补全标签闭合 #

<mat-horizontal-stepper linear stepper (selectionChange)="onStepChange($event)">
  <form [formGroup]="form">
    <!-- 补全标签末尾的闭合符 > -->
    <mat-step label="A" [stepControl]="aFormGroup" (interacted)="onStepperInteracted($event)"></mat-step>
    <mat-step label="B" [stepControl]="bFormGroup" (interacted)="onStepperInteracted($event)"></mat-step>
  </form>
</mat-horizontal-stepper>

2. 验证触发逻辑 #

你可以故意不填写步骤A的必填表单项，此时点击步骤B的头部或者下一步按钮，因为线性模式下步骤A未通过验证，切换会失败，此时就能触发interacted事件，控制台会打印对应的日志。

3. 版本兼容确认 #

Angular 11.2.5对应的Angular Material版本已经原生支持interacted事件，不需要额外升级依赖，只要满足触发条件即可正常触发。

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