angular - 当那个面板的表单组无效时，如何打开mat-expansion-panel？

Question

我有一个 formArray与多个 formGroups .每个formGroup位于扩展面板内。现在当我点击 "Check what's missing"按钮，表单验证运行并显示无效表单字段的错误。但是如果 mat-expansion-panel 关闭，你就看不到哪些字段是无效的。当我检查表单验证时，我希望扩展面板无效 formGroup打开以便用户可以看到哪些表单字段无效。我已经添加了代码供您引用:

<!-- Personal Form inside Expansion Panel Personal -->
<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Personal
        </mat-panel-title>
    </mat-expansion-panel-header>
    <app-personal-form [form]="form"></app-personal-form>
</mat-expansion-panel>

<!-- Work Form inside Expansion Panel Work -->
<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Work
        </mat-panel-title>
    </mat-expansion-panel-header>
    <app-work-form [form]="form"></app-work-form>
</mat-expansion-panel>

<!-- Address Form inside Expansion Panel Work -->
<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Address
        </mat-panel-title>
    </mat-expansion-panel-header>
    <app-address-form [form]="form"></app-address-form>
</mat-expansion-panel>

<div class="top-15" align="end">
    <button class="btn-success" mat-raised-button [disabled]="form.valid" (click)="form.showErrors()">Check what's missing</button> 
    <button class="btn-success" mat-raised-button [disabled]="!form.valid || !form.dirty" (click)="save()">Save</button>
</div>

Answer 1

使用 ViewChildren 获取扩展面板

  import {MatExpansionPanel} from '@angular/material/expansion';

  @ViewChildren(MatExpansionPanel) pannels:QueryList<MatExpansionPanel>  

在提交中，您可以做一些类似的事情，请记住面板的“个人”索引为 0，“工作”索引为 1....

submit()
{
  this.pannels.forEach((x,index)=>{
     if (index==0 && this.form.get('Personal').invalid)
        x.open();
     if (index==1 && this.form.get('Work').invalid)
        x.open();
   ....
   })
}

注意:我不知道你是如何制作表格的，所以条件可能会改变，但我希望这对你有帮助