bug(mat-radio-group): Programmatic changes are not reflected in the form model
- 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
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