时间戳

首页 > 解决方案 > 当该面板的表单组无效时如何打开mat-expansion-panel？

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

问题描述

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

标签： angulartypescriptangular-materialfrontendangular8

解决方案

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

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 中学习阶段。

推荐阅读