mat-button-toggle-group incorrectly displays selection when used with reactive forms framework

[bart113]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

mat-button-toggle-group incorrectly displays selection when it is used with:

• mat-button-toggles which can change during the mat-button-toggle-group's lifespan,
• the reactive forms framework

---

The issue seems to come down to mat-button-toggle-group relying on its internal _rawValue field for determining selection of buttons that are being added/removed, and the fact that user interactions never update the _rawValue field:

components/src/material/button-toggle/button-toggle.ts

Line 129 in 06f8544

private _rawValue: any;

---

The workaround I was able to find for this is to specify not only:

<mat-button-toggle-group [formControl]="control">
</mat-button-toggle-group>

but also provide the [value] input:

<mat-button-toggle-group [formControl]="control" [value]="control.value">
</mat-button-toggle-group>

It seems to poke mat-button-toggle-group just enough to make it work, but it should obviously not be needed.

Reproduction

StackBlitz link: https://stackblitz.com/edit/7ytnse?file=src%2Fexample%2Fbutton-toggle-exclusive-example.html

Steps to reproduce:

1. Click "Last button"
2. Click "Toggle button values"
3. Click "Toggle button values"
4. Click "Toggle button values"

Expected Behavior

After each of the steps, the "Last button" is selected - as dictated by the FormControl's value.

Actual Behavior

After step 3, "A" is selected. After step 4 nothing is selected.

Environment

• Angular: 16.1.1
• CDK/Material: 16.1.3
• Browser(s): Chrome 114.0.5735.133
• Operating System (e.g. Windows, macOS, Ubuntu): modified Debian

[bart113]

Thank you for the quick fix!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}