diff --git a/src/material-experimental/mdc-radio/radio.spec.ts b/src/material-experimental/mdc-radio/radio.spec.ts index 6c2c704af5f1..39b2da18ff16 100644 --- a/src/material-experimental/mdc-radio/radio.spec.ts +++ b/src/material-experimental/mdc-radio/radio.spec.ts @@ -79,6 +79,11 @@ describe('MDC-based MatRadio', () => { } }); + it('should clear the name attribute from the radio group host node', () => { + expect(groupInstance.name).toBeTruthy(); + expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy(); + }); + it('should coerce the disabled binding on the radio group', () => { (groupInstance as any).disabled = ''; fixture.detectChanges(); diff --git a/src/material-experimental/mdc-radio/radio.ts b/src/material-experimental/mdc-radio/radio.ts index 61e727a0009c..794c28c0dc42 100644 --- a/src/material-experimental/mdc-radio/radio.ts +++ b/src/material-experimental/mdc-radio/radio.ts @@ -72,6 +72,7 @@ export const MAT_RADIO_GROUP = new InjectionToken<_MatRadioGroupBase<_MatRadioBu host: { 'role': 'radiogroup', 'class': 'mat-mdc-radio-group', + '[attr.name]': 'null', }, }) export class MatRadioGroup extends _MatRadioGroupBase { @@ -96,6 +97,7 @@ export class MatRadioGroup extends _MatRadioGroupBase { '[attr.aria-label]': 'null', '[attr.aria-labelledby]': 'null', '[attr.aria-describedby]': 'null', + '[attr.name]': 'null', // Note: under normal conditions focus shouldn't land on this element, however it may be // programmatically set, for example inside of a focus trap, in this case we want to forward // the focus to the native element. diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index d24cc9b57a86..e9f09caf1614 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -71,6 +71,11 @@ describe('MatRadio', () => { } }); + it('should clear the name attribute from the radio group host node', () => { + expect(groupInstance.name).toBeTruthy(); + expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy(); + }); + it('should coerce the disabled binding on the radio group', () => { (groupInstance as any).disabled = ''; fixture.detectChanges(); @@ -781,6 +786,10 @@ describe('MatRadio', () => { it('should default the radio color to `accent`', () => { expect(seasonRadioInstances.every(radio => radio.color === 'accent')).toBe(true); }); + + it('should clear the name attribute from the radio host node', () => { + expect(radioDebugElements.every(el => !el.nativeElement.getAttribute('name'))).toBe(true); + }); }); describe('with tabindex', () => { diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts index 5a8b8e91b0ca..271d3d957b18 100644 --- a/src/material/radio/radio.ts +++ b/src/material/radio/radio.ts @@ -335,6 +335,7 @@ export abstract class _MatRadioGroupBase host: { 'role': 'radiogroup', 'class': 'mat-radio-group', + '[attr.name]': 'null', }, }) export class MatRadioGroup extends _MatRadioGroupBase { @@ -655,6 +656,7 @@ export abstract class _MatRadioButtonBase '[attr.aria-label]': 'null', '[attr.aria-labelledby]': 'null', '[attr.aria-describedby]': 'null', + '[attr.name]': 'null', // Note: under normal conditions focus shouldn't land on this element, however it may be // programmatically set, for example inside of a focus trap, in this case we want to forward // the focus to the native element.