如何将 mat-button-toggle-group 设为只读模式答案

【问题标题】：How to make mat-button-toggle-group as read only mode如何将 mat-button-toggle-group 设为只读模式
【发布时间】：2020-11-24 04:35:35
【问题描述】：

我们可以使用 [readonly]="true" 指令将输入字段设置为只读模式，同样可以将 mat-toggle-group 设置为只读模式，

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [readonly]="true">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-button-toggle-group>

我不想将其设为禁用。如果在表单提交期间禁用它，我将无法访问此值。 Readonly 表示如果已设置，用户不要更改该值。

【问题讨论】：

标签： javascript angular

【解决方案1】：

好吧，我不确定即使 disabled 属性是否会起作用。 Angular 团队似乎并不在意，因为它不是按钮或输入之类的原生元素，因此浏览器无法理解它。 see this

我能想到的唯一解决方案是使用 css，添加条件样式，在 mat-button-toggle-group 上设置 pointer-events: none 并设置 pointer-events: auto; 以重新启用它，这将使其无法点击但仍保留其属性和价值。这将需要一些额外的突出显示，以便用户了解其设置为只读。请注意，部分旧浏览器和 IE10 及以下不支持此功能。

【讨论】：

如果你的 [disabled] 很长，这会变得很乱，但实际上可以禁用按钮。

【解决方案2】：

Disabled 属性有效。

stackblitz

【讨论】：

如果被禁用，那么问题是我们在表单提交过程中无法传递这些值
如果将表单元素与组件绑定，它应该可以工作。你能分享表单示例的stackblitz代码吗？