fix(radio): defaulting to invalid name attribute

Fixes the radio button defaulting to `name="undefined"` for the underlying input, if the consumer hasn't passed in a name. Relates to angular#7130.
crisbeto · Sep 17, 2017 · 8f09ca3 · 8f09ca3
1 parent df808b8
commit 8f09ca3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
@@ -15,7 +15,7 @@
          [id]="inputId"
          [checked]="checked"
          [disabled]="disabled"
-         [name]="name"
+         [attr.name]="name"
          [required]="required"
          [attr.aria-label]="ariaLabel"
          [attr.aria-labelledby]="ariaLabelledby"

diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts
@@ -7,7 +7,7 @@ import {dispatchFakeEvent, FakeViewportRuler} from '@angular/cdk/testing';
 import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core';
 import {MdRadioButton, MdRadioChange, MdRadioGroup, MdRadioModule} from './index';
 
-describe('MdRadio', () => {
+fdescribe('MdRadio', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -638,6 +638,12 @@ describe('MdRadio', () => {
         expect(document.activeElement).toBe(fruitRadioNativeInputs[i]);
       }
     });
+
+    it('should not add the "name" attribute if it is not passed in', () => {
+      const radio = fixture.debugElement.nativeElement.querySelector('#nameless input');
+      expect(radio.hasAttribute('name')).toBe(false);
+    });
+
   });
 
   describe('with tabindex', () => {
@@ -711,6 +717,7 @@ class RadiosInsideRadioGroup {
                      [aria-labelledby]="ariaLabelledby">
     </md-radio-button>
     <md-radio-button name="fruit" value="raspberry">Raspberry</md-radio-button>
+    <md-radio-button id="nameless" value="no-name">No name</md-radio-button>
   `
 })
 class StandaloneRadioButtons {