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

EN

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

  @ViewChildren(MatExpansionPanel) pannels:QueryList<MatExpansionPanel>  

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

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
    }
  }
}