angular / angular/components

bug(mat-radio-group): Programmatic changes are not reflected in the form model

Open
#24,546 3 comments 1 reaction 0 assignees View on GitHub
area: material/radio P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Description

When setting `value` on `matRadioGroup`, the visually selected radio button updates, but the form model does not.

Looking at the material source code, the form model is only updated (via `_controlValueAccessorChangeFn`) via the radio input's `change` event. Is this intentional?

### Reproduction

See Stackblitz: https://stackblitz.com/edit/angular-ivy-hpd53z?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce:
1. Select a radio button by clicking it - observe that the form model updates accordingly
2. Select a radio button that is not green
3. Click the 'Force Green' button, which programmatically sets the `value` to green

### Expected Behavior

The `color` value in the form model updates

### Actual Behavior

The `color` value in the form model does not update

### Environment

- Angular: 13.2.0
- CDK/Material: 13.2.5
- Browser(s): Chrome
- Operating System: Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and the mat-radio-group source described in the issue, tracing how programmatic value changes reach the form model. Done means setting the group value to green updates the form model's color value, while the existing click behavior continues to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.