angular - そのパネルのフォームグループが無効な場合に mat-expansion-panel を開く方法は？

私は複数のformGroupsを持つformArrayを持っています。各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>

回答 #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のフェーズを学んでいます。

回答 #2

ViewChildren を使って展開パネルを取得する

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

  @ViewChildren(MatExpansionPanel) pannels:QueryList<MatExpansionPanel>  

送信時にはいくつか作ることができます。パネルは「Personal」がインデックス0、「Work」がインデックス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();
   ....
   })
}

注意：あなたがどのようにフォームを作るかはわからないので、条件は変わるかもしれませんが、これがあなたの役に立てばと思います