Блог

Мы можем сделать поле ввода в режиме только для чтения, используя [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>
  

Я не хочу делать его отключенным. Если он отключен во время отправки формы, я не могу получить доступ к этому значению. Только для чтения означает, что пользователь не изменяет значение, если оно уже установлено.

Ну, я не уверен, будет ли работать даже отключенный атрибут. Angular team, похоже, не волнует, поскольку это не родной элемент, такой как кнопка или ввод, поэтому браузер его не понимает. смотрите это

Единственное решение, которое я могу придумать, — это использовать css, добавить условный стиль, установить параметр pointer-events: none mat-button-toggle-group и pointer-events: auto; снова включить его, что сделает его недоступным для нажатия, но при этом сохранит его свойства и значение. Это потребует некоторого дополнительного выделения, хотя для пользователя, чтобы понять, что он установлен только для чтения. Обратите внимание, что некоторые старые браузеры и IE10 и ниже не поддерживают это.

Disabled атрибут работает.

stackblitz