Angular Material中如何限制用户在当前面板表单验证前打开后续手风琴？

核心逻辑 #

通过跟踪每个面板内表单的验证状态，拦截后续面板的展开请求：只有当前面所有面板的表单均验证通过时，才允许展开后续面板；若用户尝试展开未解锁的面板，自动触发第一个未完成表单的验证，并保持当前面板展开状态，同时阻止目标面板展开。

实现步骤 #

1. 模板修改 #

给手风琴和面板添加必要的绑定与引用：

<mat-accordion multi="true">
  <!-- 面板1 -->
  <mat-expansion-panel 
    [expanded]="true"
    (expandedChange)="onPanelExpand(0, $event)"
  >
    <mat-expansion-panel-header>
      <mat-panel-title>步骤1：基础信息</mat-panel-title>
    </mat-expansion-panel-header>
    <form #form1="ngForm">
      <mat-form-field>
        <input matInput name="name" required ngModel placeholder="请输入姓名">
        <mat-error>姓名为必填项</mat-error>
      </mat-form-field>
      <!-- 其他表单控件 -->
    </form>
  </mat-expansion-panel>

  <!-- 面板2 -->
  <mat-expansion-panel 
    (expandedChange)="onPanelExpand(1, $event)"
  >
    <mat-expansion-panel-header>
      <mat-panel-title>步骤2：联系方式</mat-panel-title>
    </mat-expansion-panel-header>
    <form #form2="ngForm">
      <mat-form-field>
        <input matInput name="phone" required pattern="^1[3-9]\d{9}$" ngModel placeholder="请输入手机号">
        <mat-error>请输入有效的手机号</mat-error>
      </mat-form-field>
      <!-- 其他表单控件 -->
    </form>
  </mat-expansion-panel>

  <!-- 后续面板以此类推 -->
</mat-accordion>

2. 组件逻辑实现 #

在组件中处理表单状态跟踪与面板展开拦截：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-expansion-steps',
  templateUrl: './expansion-steps-example.html',
})
export class ExpansionStepsExample implements AfterViewInit {
  @ViewChildren(NgForm) forms!: QueryList<NgForm>;
  // 存储每个表单的验证状态，索引对应面板顺序
  formValidities: boolean[] = [];

  ngAfterViewInit(): void {
    // 订阅每个表单的状态变化，更新验证状态数组
    this.forms.forEach((form, index) => {
      form.statusChanges?.subscribe(() => {
        this.formValidities[index] = form.valid;
      });
    });
  }

  onPanelExpand(panelIndex: number, isExpanding: boolean): void {
    // 如果是展开操作，检查前面所有表单是否都有效
    if (isExpanding) {
      const canExpand = this.formValidities.slice(0, panelIndex).every(valid => valid);
      
      if (!canExpand) {
        // 找到第一个未通过验证的表单
        const invalidIndex = this.formValidities.findIndex(valid => !valid);
        // 触发该表单的验证（显示所有错误）
        this.forms.toArray()[invalidIndex].form.markAllAsTouched();
        // 阻止当前面板展开
        setTimeout(() => {
          const panels = document.querySelectorAll('mat-expansion-panel') as NodeListOf<HTMLElement>;
          panels[panelIndex].setAttribute('aria-expanded', 'false');
          // 滚动到未完成的面板，优化体验
          panels[invalidIndex].scrollIntoView({ behavior: 'smooth' });
        });
      }
    }
    // 折叠操作不做限制，用户可随时返回修改
  }
}

关键细节说明 #

• multi="true"：必须开启手风琴的多面板展开模式，允许用户返回之前的面板修改内容。
• 表单状态跟踪：通过ViewChildren获取所有表单实例，订阅statusChanges实时更新验证状态数组。
• 展开拦截逻辑：当用户尝试展开未解锁面板时，找到第一个未通过验证的表单并触发全量验证（markAllAsTouched()），同时通过DOM操作阻止目标面板展开。
• 滚动优化：添加滚动到未完成面板的逻辑，帮助用户快速定位需要完善的内容。

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