How to prevent mat-expansion-panel from closing?

Question

I have matAccordion in my page in which the number of panels are dynamic. Each of these panels contain a form. I want to prevent the closing of my panel until the form is duly filled and is valid.

I am not able to find any event that will prevent the panel from closing. The "(closed)" event fires after the panel close animation has happened.

Is there some logic to control the close?

Answer 1

Simple solution there

your-component.html

...
<mat-expansion-panel [opened]="panelOpened($event)">
    <mat-expansion-panel-header [ngClass]="(isPanelOpened)?'no-events':'default'">...</mat-expansion-panel-header>
</mat-expansion-panel>
...

your-component.ts

...
isPanelOpened: boolean = false;
...
panelOpened(event) {
    this.isPanelOpened = true;
}

submitForm() {
    // submit form stuff
    ...
    // at the end
    this.isPanelOpened = false;
}
...

your-component.css

.no-events {
    pointer-events: none;
}

.default {
    pointer-events: auto;
}

On first panel open it will change isPanelOpened to true what removes event trigger on your mat-panel. That means user can not close it unlin the form is submitted. At the end of the submitForm() your are switching isPanelOpened to false what allows user to close the panel.