Question

我的页面上有matAccordion，面板的数量是动态的。这些面板均包含一个表单。我希望在适当填写表格且有效之前，不要关闭面板。

我找不到任何阻止面板关闭的事件。面板关闭动画发生后，就会触发“（（关闭）”）事件。

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

Answer 1

  <mat-expansion-panel [expanded]="!formSubmited$ | async"></mat-expansion-panel>

Answer 2

那里的简单解决方案

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

在打开的第一个面板上，它将isPanelOpened更改为true，这将删除垫板上的事件触发器。这意味着用户无法在提交表单之前将其关闭。在submitForm()的结尾处，您将isPanelOpened切换为false，这使用户可以关闭面板。

Answer 3

在您的CSS中添加一个类，该类具有禁用指针事件的规则：

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

然后有条件地将该类添加到您的mat-expansion-panel-header中，例如：

<mat-expansion-panel-header [class]="formIsValid ? 'disabled-pointer' : ''">
    <mat-panel-title>Panel title</mat-panel-title>
</mat-expansion-panel-header>

要从标题中隐藏切换图标，请有条件地将hideToggle属性添加到您的mat-accordion中，例如：

<mat-accordion [hideToggle]="formIsValid ? true : false">
    ...
</mat-accordion>

如何防止垫子扩展面板关闭？

3 个答案: