fix(radio): not updating DOM node name if group name changes (#14950)

Fixes the `name` of the underlying radio button DOM nodes not being updated, if the name of the parent group changes.

Author: crisbeto

src/lib/radio/radio.spec.ts

@@ -409,6 +409,20 @@ describe('MatRadio', () => {
       }
     });
 
+    it('should update the name of radio DOM elements if the name of the group changes', () => {
+      const nodes: HTMLInputElement[] = innerRadios.map(radio => radio.nativeElement);
+
+      expect(nodes.every(radio => radio.getAttribute('name') === groupInstance.name))
+          .toBe(true, 'Expected all radios to have the initial name.');
+
+      fixture.componentInstance.groupName = 'changed-name';
+      fixture.detectChanges();
+
+      expect(groupInstance.name).toBe('changed-name');
+      expect(nodes.every(radio => radio.getAttribute('name') === groupInstance.name))
+          .toBe(true, 'Expected all radios to have the new name.');
+    });
+
     it('should check the corresponding radio button on group value change', () => {
       expect(groupInstance.value).toBeFalsy();
       for (const radio of radioInstances) {
@@ -814,7 +828,7 @@ class StandaloneRadioButtons {
 
 @Component({
   template: `
-  <mat-radio-group [(ngModel)]="modelValue" (change)="lastEvent = $event">
+  <mat-radio-group [name]="groupName" [(ngModel)]="modelValue" (change)="lastEvent = $event">
     <mat-radio-button *ngFor="let option of options" [value]="option.value">
       {{option.label}}
     </mat-radio-button>
@@ -823,6 +837,7 @@ class StandaloneRadioButtons {
 })
 class RadioGroupWithNgModel {
   modelValue: string;
+  groupName = 'radio-group';
   options = [
     {label: 'Vanilla', value: 'vanilla'},
     {label: 'Chocolate', value: 'chocolate'},

src/lib/radio/radio.ts

@@ -219,6 +219,7 @@ export class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
     if (this._radios) {
       this._radios.forEach(radio => {
         radio.name = this.name;
+        radio._markForCheck();
       });
     }
   }