fix(material/radio): group selected button not set for preselected control value (#21154)

Fixes that `MatRadioGroup.selected` wasn't set if the value is assigned on init through a `ControlValueAccessor`.

Fixes #21148.

Author: crisbeto

src/material-experimental/mdc-radio/radio.spec.ts

@@ -537,32 +537,29 @@ describe('MDC-based MatRadio', () => {
   });
 
   describe('group with FormControl', () => {
-    let fixture: ComponentFixture<RadioGroupWithFormControl>;
-    let groupDebugElement: DebugElement;
-    let groupInstance: MatRadioGroup;
-    let testComponent: RadioGroupWithFormControl;
-
-    beforeEach(() => {
-      fixture = TestBed.createComponent(RadioGroupWithFormControl);
+    it('should toggle the disabled state', () => {
+      const fixture = TestBed.createComponent(RadioGroupWithFormControl);
       fixture.detectChanges();
 
-      testComponent = fixture.debugElement.componentInstance;
-      groupDebugElement = fixture.debugElement.query(By.directive(MatRadioGroup))!;
-      groupInstance = groupDebugElement.injector.get<MatRadioGroup>(MatRadioGroup);
-    });
+      expect(fixture.componentInstance.group.disabled).toBeFalsy();
 
-    it('should toggle the disabled state', () => {
-      expect(groupInstance.disabled).toBeFalsy();
+      fixture.componentInstance.formControl.disable();
+      fixture.detectChanges();
 
-      testComponent.formControl.disable();
+      expect(fixture.componentInstance.group.disabled).toBeTruthy();
+
+      fixture.componentInstance.formControl.enable();
       fixture.detectChanges();
 
-      expect(groupInstance.disabled).toBeTruthy();
+      expect(fixture.componentInstance.group.disabled).toBeFalsy();
+    });
 
-      testComponent.formControl.enable();
+    it('should have a selected button when one matches the initial value', () => {
+      const fixture = TestBed.createComponent(RadioGroupWithFormControl);
+      fixture.componentInstance.formControl.setValue('2');
       fixture.detectChanges();
 
-      expect(groupInstance.disabled).toBeFalsy();
+      expect(fixture.componentInstance.group.selected?.value).toBe('2');
     });
   });
 
@@ -999,12 +996,14 @@ class DisableableRadioButton {
 
 @Component({
   template: `
-  <mat-radio-group [formControl]="formControl">
-    <mat-radio-button value="1">One</mat-radio-button>
-  </mat-radio-group>
+    <mat-radio-group [formControl]="formControl">
+      <mat-radio-button value="1">One</mat-radio-button>
+      <mat-radio-button value="2">Two</mat-radio-button>
+    </mat-radio-group>
   `
 })
 class RadioGroupWithFormControl {
+  @ViewChild(MatRadioGroup) group: MatRadioGroup;
   formControl = new FormControl();
 }
 

src/material/radio/radio.spec.ts

@@ -531,32 +531,29 @@ describe('MatRadio', () => {
   });
 
   describe('group with FormControl', () => {
-    let fixture: ComponentFixture<RadioGroupWithFormControl>;
-    let groupDebugElement: DebugElement;
-    let groupInstance: MatRadioGroup;
-    let testComponent: RadioGroupWithFormControl;
-
-    beforeEach(() => {
-      fixture = TestBed.createComponent(RadioGroupWithFormControl);
+    it('should toggle the disabled state', () => {
+      const fixture = TestBed.createComponent(RadioGroupWithFormControl);
       fixture.detectChanges();
 
-      testComponent = fixture.debugElement.componentInstance;
-      groupDebugElement = fixture.debugElement.query(By.directive(MatRadioGroup))!;
-      groupInstance = groupDebugElement.injector.get<MatRadioGroup>(MatRadioGroup);
-    });
+      expect(fixture.componentInstance.group.disabled).toBeFalsy();
 
-    it('should toggle the disabled state', () => {
-      expect(groupInstance.disabled).toBeFalsy();
+      fixture.componentInstance.formControl.disable();
+      fixture.detectChanges();
 
-      testComponent.formControl.disable();
+      expect(fixture.componentInstance.group.disabled).toBeTruthy();
+
+      fixture.componentInstance.formControl.enable();
       fixture.detectChanges();
 
-      expect(groupInstance.disabled).toBeTruthy();
+      expect(fixture.componentInstance.group.disabled).toBeFalsy();
+    });
 
-      testComponent.formControl.enable();
+    it('should have a selected button when one matches the initial value', () => {
+      const fixture = TestBed.createComponent(RadioGroupWithFormControl);
+      fixture.componentInstance.formControl.setValue('2');
       fixture.detectChanges();
 
-      expect(groupInstance.disabled).toBeFalsy();
+      expect(fixture.componentInstance.group.selected?.value).toBe('2');
     });
   });
 
@@ -974,12 +971,14 @@ class DisableableRadioButton {
 
 @Component({
   template: `
-  <mat-radio-group [formControl]="formControl">
-    <mat-radio-button value="1">One</mat-radio-button>
-  </mat-radio-group>
+    <mat-radio-group [formControl]="formControl">
+      <mat-radio-button value="1">One</mat-radio-button>
+      <mat-radio-button value="2">Two</mat-radio-button>
+    </mat-radio-group>
   `
 })
 class RadioGroupWithFormControl {
+  @ViewChild(MatRadioGroup) group: MatRadioGroup;
   formControl = new FormControl();
 }
 

src/material/radio/radio.ts

@@ -539,6 +539,11 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
     if (this.radioGroup) {
       // If the radio is inside a radio group, determine if it should be checked
       this.checked = this.radioGroup.value === this._value;
+
+      if (this.checked) {
+        this.radioGroup.selected = this;
+      }
+
       // Copy name from parent radio group
       this.name = this.radioGroup.name;
     }