angular - 如何防止垫子膨胀板关闭？

Question

我的页面中有 matAccordion，其中面板的数量是动态的。这些面板中的每一个都包含一个表单。我想阻止我的面板关闭，直到表格正确填写并有效为止。

我找不到任何会阻止面板关闭的事件。 "(closed)"事件在面板关闭动画发生后触发。

是否有一些逻辑来控制关闭？

Answer 1

那里的简单解决方案

你的组件.html

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

你的component.ts

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

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

你的组件.css

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

.default {
    pointer-events: auto;
}

在第一个面板打开它会改变 isPanelOpened真正删除垫板上的事件触发器。这意味着用户不能在提交表单之前关闭它。末 submitForm()您正在切换 isPanelOpened设置为 false 允许用户关闭面板。