Question

我在加载表单时创建N个扩展面板，默认情况下第一个面板保持打开状态。每个面板都有自己的带有N个控件的formGroup。

当用户尝试保存表单时，我将表单上的所有控件标记为已触摸，以便突出显示验证触发和无效控件。然后，我想打开包含无效控件的所有面板，并关闭所有不包含带有验证错误的控件的面板。

我尝试在模板中使用扩展属性，但是只有在加载表单时才会对其进行评估，并且在用户开始手动打开和关闭面板后不进行维护（这是有意义的）。

<mat-expansion-panel [expanded]="i == 0"
     *ngFor="let p of panels; let i=index" 
     formGroupName="{{ p.formGroupName }}"
     [attr.data-valid]="this.form.get(p.formGroupName).valid">

... some form controls ...

</mat-expansion-panel>

我希望能够设置数据有效属性，如上所示，这样我就可以迭代所有MatExpansionPanel并相应地设置扩展属性。但是，当我使用以下内容时，我无法使用数据集。

  @ViewChildren(MatExpansionPanel) panels: QueryList<MatExpansionPanel>;

我可以通过解析MatExpansionPanel实例的id属性末尾的数字找到panel和formGroup之间的匹配，但我怀疑我不应该对这个值做任何假设。

一旦我使用ViewChildren获得MatExpansionPanel实例，我就看不到如何获取nativeElement以便我可以访问数据集。如果我查询nativeElements，那么我就无法访问MatExpansionPanel。该怎么办？

Answer 1

也许尝试执行以下操作：首先，使用

启用多个打开的面板

<mat-accordion [multi]="true"></mat-accordion>

然后直接在expanded输入中传递formGroup的有效标志以及一个标志。

<mat-expansion-panel [expanded]="this.form.get(p.formGroupName).valid && flag">
  [...]
</mat-expansion-panel>

随后，在提交表单时将flag设置为true，并且在默认情况下以及表单获得 dirty 时将标志设置为false。

如何将自定义属性与Angular Material组件相关联？

1 个答案: