Angular12 步进器内Form表单页面加载自动触发校验如何解决

这个问题是Angular Material Stepper的默认行为导致的：如果给step绑定了stepControl属性，stepper会在初始化时自动校验关联的表单，触发控件的错误状态更新，所以你在ngOnInit中调用markAsPristine会被后续的stepper校验逻辑覆盖，不会生效。

方案1：自定义错误状态匹配器（全版本兼容） #

Angular Material的mat-error默认显示逻辑由ErrorStateMatcher控制，你可以自定义匹配规则，仅在控件被触碰/表单提交时才显示错误：

1. 先定义自定义匹配器

import {ErrorStateMatcher} from '@angular/material/core';
import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';

export class OnlyTouchedErrorMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control?.invalid && (control.touched || form?.submitted));
  }
}

2. 组件中声明匹配器实例

export class YourComponent {
  errorMatcher = new OnlyTouchedErrorMatcher();
  // 其余原有逻辑
}

3. 表单控件绑定匹配器

<input matInput formControlName="professionalRUT" [errorStateMatcher]="errorMatcher">

方案2：关闭stepper自动校验（v15.1+版本适用） #

高版本Angular Material提供了直接关闭stepper自动校验的属性，直接给mat-stepper添加配置即可：

<mat-stepper [disableAutomaticStepValidation]="true">
  <!-- 原有step内容 -->
</mat-stepper>

方案3：手动控制step完成状态 #

不使用stepControl绑定表单，改为手动控制completed属性，只有点击下一步时才触发表单校验：

<mat-step [completed]="step1Completed">
  <!-- 原有表单内容 -->
  <button matStepperNext (click)="handleStep1Next()">下一步</button>
</mat-step>

export class YourComponent {
  step1Completed = false;

  handleStep1Next() {
    if (this.professionalDataForm.valid) {
      this.step1Completed = true;
    } else {
      // 手动触发全表单错误提示
      this.professionalDataForm.markAllAsTouched();
    }
  }
}

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