javascript - How to make mat-button-toggle-group as read only mode - Stack Overflow

admin管理员组

文章数量:1399901

We can make the input field as read only mode using the [readonly]="true" directives, in the same is it possible to make the mat-toggle-group as readonly mode,

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

I don't want to make it as disabled. If it is disabled during the form submission I can't access this value. Readonly means user don't change the value if it is already set.

We can make the input field as read only mode using the [readonly]="true" directives, in the same is it possible to make the mat-toggle-group as readonly mode,

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

I don't want to make it as disabled. If it is disabled during the form submission I can't access this value. Readonly means user don't change the value if it is already set.

• javascript
• angular

Share Improve this question Follow edited Nov 23, 2020 at 20:35 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Nov 19, 2020 at 12:48 RijoRijo 3,04366 gold badges3939 silver badges6767 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Well I'm not sure if even the disabled attribute will work. Angular team doesn't seem to care as it's not a native element like button or input so browser doesn't understand it. see this

Only solution I can think of is using css, add a conditional style, setting pointer-events: none on the mat-button-toggle-group and pointer-events: auto; to re-enable it, which will make it unclickable but still retaining its properties and value. This will require some additional highlight though for user to understand that its set to readonly. Note that some old browsers and IE10 and below does not support this.

Disabled attribute is working.

stackblitz

本文标签： javascriptHow to make matbuttontogglegroup as read only modeStack Overflow