angular / angular/components

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

Offen
#24,546 3 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: material/radio P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und dem im Issue beschriebenen Quellcode von mat-radio-group und verfolge, wie programmatische Wertänderungen das Formularmodell erreichen. Als erledigt gilt die Aufgabe, wenn das Setzen des Gruppenwerts auf green den Farbwert des Formularmodells aktualisiert, während das bestehende Klickverhalten weiterhin funktioniert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.