Angular Material 5.2.4 matHorizontalStepper必填项验证异常咨询

这个问题我之前也碰到过，核心原因是步进器没有正确关联到包含所有必填项的表单整体校验状态。Linear模式下的matHorizontalStepper需要依赖步骤绑定的表单（或表单组）的整体有效性来判断是否允许进入下一步，而不是单个控件的状态。下面分两种表单类型给出解决方案：

1. 响应式表单（推荐） #

首先在组件类中创建包含所有必填控件的表单组，并为每个控件添加Validators.required校验器：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-stepper-example',
  templateUrl: './stepper-example.component.html'
})
export class StepperExampleComponent {
  step1Form: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单组，包含两个必填输入控件
    this.step1Form = this.fb.group({
      firstRequired: ['', Validators.required],
      secondRequired: ['', Validators.required]
    });
  }
}

然后在模板中，将<mat-step>的stepControl绑定到这个表单组，并确保所有输入框都关联到表单组的对应控件：

<mat-horizontal-stepper linear>
  <!-- 步骤1：绑定表单组作为stepControl -->
  <mat-step [stepControl]="step1Form">
    <ng-template matStepLabel>基础信息</ng-template>
    <form [formGroup]="step1Form">
      <mat-form-field appearance="fill">
        <input matInput placeholder="第一个必填项" formControlName="firstRequired">
        <!-- 显示必填错误提示 -->
        <mat-error *ngIf="step1Form.get('firstRequired')?.invalid && step1Form.get('firstRequired')?.touched">
          此项为必填项
        </mat-error>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <input matInput placeholder="第二个必填项" formControlName="secondRequired">
        <mat-error *ngIf="step1Form.get('secondRequired')?.invalid && step1Form.get('secondRequired')?.touched">
          此项为必填项
        </mat-error>
      </mat-form-field>

      <div class="stepper-buttons">
        <button mat-button matStepperNext>下一步</button>
      </div>
    </form>
  </mat-step>

  <!-- 步骤2 -->
  <mat-step>
    <ng-template matStepLabel>确认信息</ng-template>
    <p>请确认所有信息无误</p>
    <div class="stepper-buttons">
      <button mat-button matStepperPrevious>上一步</button>
      <button mat-button>完成</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

2. 模板驱动表单 #

如果使用模板驱动表单，需要确保表单通过#formRef="ngForm"获取引用，并将<mat-step>的stepControl绑定到这个表单引用，同时每个输入框添加required属性：

<mat-horizontal-stepper linear>
  <mat-step [stepControl]="step1Form">
    <ng-template matStepLabel>基础信息</ng-template>
    <form #step1Form="ngForm">
      <mat-form-field appearance="fill">
        <input matInput placeholder="第一个必填项" name="firstRequired" required ngModel>
        <mat-error>此项为必填项</mat-error>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <input matInput placeholder="第二个必填项" name="secondRequired" required ngModel>
        <mat-error>此项为必填项</mat-error>
      </mat-form-field>

      <div class="stepper-buttons">
        <button mat-button matStepperNext>下一步</button>
      </div>
    </form>
  </mat-step>

  <!-- 步骤2内容同上 -->
</mat-horizontal-stepper>

关键注意点 #

• 必须将<mat-step>的stepControl绑定到整个表单（或表单组），而不是单个输入控件，这样步进器才会校验所有控件的有效性。
• Linear模式下，只有当stepControl指向的表单处于valid状态时，才会启用“下一步”按钮，或者允许通过点击步骤标签切换到下一步。
• 确保每个必填输入框都正确设置了校验规则（响应式用Validators.required，模板驱动用required属性），并且错误提示能正常显示。

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