Angular 10中点击mat-stepper步进器标题触发onSubmit并显示告警的实现问题

你可以通过自定义步进器标签的点击事件来实现需求，具体修改如下：

步骤1：改造第二个步进器的标签结构 #

将第二个mat-step原来的label属性替换为ng-template形式的matStepLabel，方便绑定点击事件。

步骤2：点击事件逻辑处理 #

点击第二个标签时先触发你已编写的onSubmit函数，同时触发表单校验状态更新，校验通过后再跳转至第二步。

步骤3：补充表单校验触发逻辑 #

在onSubmit函数中新增代码，将第一个表单的所有控件标记为已触碰状态，保证未填必填项显示红色错误边框。

修改后模板代码 #

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext (click)="onSubmit()">Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <!-- 自定义标签模板绑定点击事件 -->
    <ng-template matStepLabel>
      <span (click)="handleSecondStepClick(stepper)">Fill out your address</span>
    </ng-template>
    <form [formGroup]="secondFormGroup">
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
          required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are now done.</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

TS代码补充 #

// 第二个步进器标签点击处理函数
handleSecondStepClick(stepper: MatHorizontalStepper) {
  // 调用你已经编写好的onSubmit函数
  this.onSubmit();
  // 第一个表单校验通过才跳转到第二步
  if (this.firstFormGroup.valid) {
    stepper.selectedIndex = 1;
  }
}

// 原有onSubmit函数补充以下代码，触发错误样式显示
onSubmit() {
  // 新增：将第一个表单所有控件标记为已触碰，未填字段自动显示红色边框
  this.firstFormGroup.markAllAsTouched();
  // 你原来的业务逻辑、告警提示逻辑保留即可
  // ...
}

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