如何限制用户打开后续的手风琴，直到当前手风琴中的表单在 Angular Material 中有效？

Question

我有一个要求，我在扩展面板中有表单，并且只有在填写当前手风琴中的表单后，我需要允许用户导航到后续的手风琴。

例如，如果有五个手风琴，每个手风琴有一个表单，则用户只有在填写了前三个手风琴中的表单后才能访问第四个手风琴。在任何给定点，用户都可以访问以前的手风琴。因此，在这个例子中，当用户在第三个手风琴中时，他们可以毫无问题地访问前两个手风琴

挑战在于，如果用户位于第三个手风琴中并尝试在不填写表单的情况下访问第四个手风琴，我应该限制它并触发对第三个手风琴的验证。用户根本不应该打开第四个手风琴。它应该触发第三个手风琴中表单的表单验证，并且第三个手风琴应保持打开状态。

我关注了 如何防止通过单击 mat-expansion-panel-header 来切换 mat-expansion-panel？、如何防止单击时打开 mat-expansion-panel？、如何切换 Angular 材质扩展以编程方式面板，当该面板的表单组无效时如何打开 mat-expansion-panel？但没有运气。

这是我迄今为止尝试过的：Stackblitz 示例（我共享了 stackblitz 示例，以便快速预览和更好的执行）

Answer 1

我修复了使用 Angular 的

ViewChildren

和

QueryList

来动态访问和操作手风琴面板。

accordions = [0, 1, 2, 3, 4];
  forms: FormGroup[] = [];
  activeIndex: number | null = 0; // Open the first accordion by default

  @ViewChildren(MatExpansionPanel) accordionPanels!: QueryList<MatExpansionPanel>;

  constructor(private fb: FormBuilder) {
    this.accordions.forEach(() => {
      this.forms.push(this.fb.group({ field: ['', Validators.required] }));
    });
  }

toggleAccordion(index: number, event: Event): void {
  event.stopPropagation(); // Prevent default event propagation
  if (index === 0 || (index > 0 && this.forms[index - 1].valid)) {
    this.activeIndex = this.activeIndex === index ? null : index;
  } else {
    this.forms[index - 1].markAllAsTouched();
    this.activeIndex = null; // Force close the current panel
  }
}

closePanel(index: number): void {
    const panel = this.accordionPanels.toArray()[index];
    if (panel) {
      panel.close();
    }
  }

我还更新了 Stackblitz 示例