diff --git a/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts b/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts index 637145bc84..e0ce6c3838 100644 --- a/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts +++ b/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts @@ -43,11 +43,17 @@ export class RadioControlRegistry { select(accessor: RadioControlValueAccessor) { this._accessors.forEach((c) => { - if (c[0].control.root === accessor._control.control.root && c[1] !== accessor) { + if (this._isSameGroup(c, accessor) && c[1] !== accessor) { c[1].fireUncheck(); } }); } + + private _isSameGroup(controlPair:[NgControl, RadioControlValueAccessor], + accessor: RadioControlValueAccessor) { + return controlPair[0].control.root === accessor._control.control.root && + controlPair[1].name === accessor.name; + } } /** diff --git a/modules/@angular/common/test/forms/integration_spec.ts b/modules/@angular/common/test/forms/integration_spec.ts index 306bb4bd9e..371f87f813 100644 --- a/modules/@angular/common/test/forms/integration_spec.ts +++ b/modules/@angular/common/test/forms/integration_spec.ts @@ -1203,44 +1203,75 @@ export function main() { it("should support ", fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - var t = `
- - -
-
- - + const t = ` + + + +
`; - let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); + const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); tick(); fixture.debugElement.componentInstance.data = { - 'chicken1': new RadioButtonState(false, 'chicken'), - 'fish1': new RadioButtonState(true, 'fish'), - - 'chicken2': new RadioButtonState(false, 'chicken'), - 'fish2': new RadioButtonState(true, 'fish') + 'chicken': new RadioButtonState(false, 'chicken'), + 'fish': new RadioButtonState(true, 'fish'), + 'beef': new RadioButtonState(false, 'beef'), + 'pork': new RadioButtonState(true, 'pork') }; fixture.detectChanges(); tick(); - var input = fixture.debugElement.query(By.css("input")); + const input = fixture.debugElement.query(By.css("input")); expect(input.nativeElement.checked).toEqual(false); dispatchEvent(input.nativeElement, "change"); tick(); - let data = fixture.debugElement.componentInstance.data; + const data = fixture.debugElement.componentInstance.data; - expect(data['chicken1']).toEqual(new RadioButtonState(true, 'chicken')); - expect(data['fish1']).toEqual(new RadioButtonState(false, 'fish')); - - expect(data['chicken2']).toEqual(new RadioButtonState(false, 'chicken')); - expect(data['fish2']).toEqual(new RadioButtonState(true, 'fish')); + expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken')); + expect(data['fish']).toEqual(new RadioButtonState(false, 'fish')); + expect(data['beef']).toEqual(new RadioButtonState(false, 'beef')); + expect(data['pork']).toEqual(new RadioButtonState(false, 'pork')); }))); }); + it("should support multiple named groups", + fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + const t = `
+ + + + +
`; + + const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); + tick(); + + fixture.debugElement.componentInstance.data = { + 'chicken': new RadioButtonState(false, 'chicken'), + 'fish': new RadioButtonState(true, 'fish'), + 'cola': new RadioButtonState(false, 'cola'), + 'sprite': new RadioButtonState(true, 'sprite') + }; + fixture.detectChanges(); + tick(); + + const input = fixture.debugElement.query(By.css("input")); + expect(input.nativeElement.checked).toEqual(false); + + dispatchEvent(input.nativeElement, "change"); + tick(); + + const data = fixture.debugElement.componentInstance.data; + + expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken')); + expect(data['fish']).toEqual(new RadioButtonState(false, 'fish')); + expect(data['cola']).toEqual(new RadioButtonState(false, 'cola')); + expect(data['sprite']).toEqual(new RadioButtonState(true, 'sprite')); + }))); + describe("setting status classes", () => { it("should work with single fields", inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {