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

【问题标题】：How to prevent mat-expansion-panel from closing?如何防止垫子扩展面板关闭？
【发布时间】：2019-12-01 08:20:51
【问题描述】：

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

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

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

【问题讨论】：

你可以在mat-expansion-panel上使用[disabled]="isDisabled"。

标签： angular angular-material frontend accordion accordionpane

【解决方案1】：

简单的解决方案

你的组件.html

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

你的组件.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 更改为 true，这会删除您的垫子面板上的事件触发器。这意味着用户在提交表单之前无法关闭它。在submitForm() 末尾，您将isPanelOpened 切换为允许用户关闭面板的假。

【讨论】：

但这也会阻止点击事件吧？如果用户尝试关闭面板而不填写表单，我想触发验证
好吧，我尝试了这种方法，之后我意识到做指针事件：无也不允许我填写表格。就像选择单选按钮或下拉值一样。
尝试在您的表单上添加pointer-events: auto，这应该可以工作
顺便说一句，我认为将 pointer-events: none 添加到您的 mat-expansion-header 不应该对您的表单产生影响，但也许其他人可以表达这一点
如果您不想在 CSS 中添加类，那么您可以简单地在 mat-expantion-panel-header 中使用单一样式绑定，例如。 <mat-expansion-panel-header [style.pointer-events]="isPanelOpened ? 'none' : 'auto'">

【解决方案2】：

向你的 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】：

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

【讨论】：

试过这个。没有帮助