Angular12中Material Stepper点击下一步未触发校验错误提示如何解决

默认Material Stepper的表单校验逻辑只会阻止步骤跳转，不会自动将表单下的控件标记为touched状态，而绝大多数错误提示的展示规则都绑定了formControl.touched属性，因此点击下一步时不会触发错误展示。

1. 配置步进器基础属性 #

确保步进器开启线性模式[linear]="true"，开启后才会强制校验每个步骤绑定的stepControl表单：

<mat-stepper [linear]="true" #stepper>
  <!-- 第一步绑定companyForm -->
  <mat-step [stepControl]="companyForm" label="企业信息填写">
    <!-- 表单控件内容 -->
    <div class="step-footer">
      <button mat-button (click)="validateFirstStep()">下一步</button>
    </div>
  </mat-step>
  <!-- 第二步绑定idForm -->
  <mat-step [stepControl]="idForm" label="身份信息填写">
    <!-- 表单控件内容 -->
  </mat-step>
</mat-stepper>

2. 编写下一步点击校验逻辑 #

在第一步的下一步按钮点击事件中，先将companyForm所有控件标记为touched状态，触发错误提示，校验通过再跳转步骤：

import { ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';
import { FormGroup, FormControl, Validators } from '@angular/forms';

export class YourComponent {
  @ViewChild('stepper') stepper: MatStepper;
  companyForm: FormGroup;
  idForm: FormGroup;

  // 表单初始化逻辑省略

  validateFirstStep() {
    // 遍历所有表单控件标记为touched，触发错误提示
    Object.values(this.companyForm.controls).forEach(control => {
      control.markAsTouched();
      control.updateValueAndValidity();
    });
    // 表单合法才跳转下一步
    if (this.companyForm.valid) {
      this.stepper.next();
    }
  }
}

3. 多步骤通用扩展（可选） #

如果后续步骤增多，可以封装通用校验方法，统一处理所有步骤的校验逻辑：

validateForm(form: FormGroup): boolean {
  Object.values(form.controls).forEach(control => {
    control.markAsTouched();
    control.updateValueAndValidity();
  });
  return form.valid;
}

// 第二步点击下一步时调用
validateSecondStep() {
  if (this.validateForm(this.idForm)) {
    this.stepper.next();
  }
}

确保你的错误提示绑定了touched状态，示例写法如下：

<mat-form-field>
  <input matInput formControlName="companyName" placeholder="企业名称">
  <mat-error *ngIf="companyForm.get('companyName').touched && companyForm.get('companyName').hasError('required')">
    企业名称为必填项
  </mat-error>
</mat-form-field>

如果自定义了错误提示组件，视图未正常更新时可在校验逻辑后调用ChangeDetectorRef.detectChanges()强制触发变更检测。

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