CODEWITHSUNDEEP
javascriptangular
Rijo
Rijo

Reputation: 3043

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

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.

Upvotes: 1

Views: 5985

Answers (2)

was_777
was_777

Reputation: 711

Disabled attribute is working.

stackblitz

Upvotes: 2

Ankit
Ankit

Reputation: 162

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.

Upvotes: 5

Related Questions