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

【问题标题】：How to open mat-expansion-panel when the form group of that panel is invalid?当该面板的表单组无效时如何打开mat-expansion-panel？
【发布时间】：2020-04-19 15:25:37
【问题描述】：

我有一个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>

【问题讨论】：

hi 也显示你的 ts 代码
请给我们看上面模板的ts代码。

标签： angular typescript angular-material frontend angular8

【解决方案1】：

请看看这是否对你有帮助：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup
  expanded = []
  errorPanles = []
  formSubmitted = false
  constructor(private fb: FormBuilder,private appRef: ApplicationRef) { }
  ngOnInit() {
    this.myForm = this.fb.group({
      personal: this.fb.group({
        fname: ['', [Validators.required]],
        lname: ['']
      }),
      work: this.fb.group({
        designation: ['', [Validators.required]],
        department: ['', [Validators.required]],
      })
    });
  }

  send(form) {
    this.formSubmitted = true
    this.expanded = []
    this.errorPanles = []
    this.appRef.tick();
    for (var key in form.controls) {
      if (form.controls[key].valid === false) {
        this.expanded.push(key)
      }
    }      
    this.errorPanles = this.expanded  
    if(this.errorPanles.length>0){
      // Form will not submit and material panel with error will open
    }else{
      // do whatever you want in case no error
    }
  }
}

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

我也在 Angular 中学习阶段。

【讨论】：

感谢@Mamta 的参考。
您好。通过解释为什么代码可能会有所帮助，可以大大改进“此代码将有所帮助”形式的答案。一般来说，提供解释和详细信息的答案将对更广泛的未来读者有用。

【解决方案2】：

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

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

【讨论】：