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();
   ....
   })
}

注意：我不知道您如何制作表格，所以情况可能会有所变化，但是希望对您有所帮助

Answer 2

嗨，请问以下链接是否对您有帮助

https://stackblitz.com/edit/angular-s59zmn

我也在学习角度学习

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

2 个答案: