angular / angular/components

Radio Button with object as value uncheckes on reset/setvalue/patchvalue

Open
#13,432 13 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

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
Just read the next part it will become obvious.

#### What is the current behavior?
When using objects as the value for MatRadioGroup and MatRadioButton the current implementation lacks a `compareWith` property like the current implementation of MatSelect. Normally the radio button will only do a reference based comparison of the value compared to the radio groups value to see if a button should be checked. This is an issue because I am using an API to get the values for the radio group and buttons this interferes with this way of doing a comparison.

However MatRadioButton does have a property called `checked` which I can use. I wrote my own compare method and have it check the current value of the MatRadioGroup with the current value of the MatRadioButton and return true to set the `checked` state of the radio button.

When I use `reset(value)`, `setValue(value)`, or `patchValue(value)` or click on a radio to change the value of the MatRadioGroup, everything works. However performing this twice with the same object results in the radio being unchecked.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-material-radio-not-checked-bug

Press the set button twice.
OR
Press the set button then press the reset button twice
OR
Change the selected radio by clicking on a new option and then press the reset button twice
OR
Do not change anything and right away (after a fresh page load) press the reset button

#### What is the use-case or motivation for changing an existing behavior?
Allowing me to use objects or arrays with MatRadioGroup/MatRadioButton while preserving the functionality of a simple reset button for my form.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
material 5 and 6

#### Is there anything else we should know?
This may be related to:
https://github.com/angular/material2/issues/11368

I also think that this feature request would also help potentially fix this issue depending on implementation:
https://github.com/angular/material2/issues/10495

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the MatRadioGroup and MatRadioButton value/checked handling. Reproduce repeated reset, setValue, and patchValue calls with object values, then trace how the second update is compared. Done means the selected radio remains checked after each repeated update and after changing options.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.