diff --git a/modules/@angular/forms/src/directives/radio_control_value_accessor.ts b/modules/@angular/forms/src/directives/radio_control_value_accessor.ts index a44ac76533..afc7e34fec 100644 --- a/modules/@angular/forms/src/directives/radio_control_value_accessor.ts +++ b/modules/@angular/forms/src/directives/radio_control_value_accessor.ts @@ -110,9 +110,7 @@ export class RadioControlValueAccessor implements ControlValueAccessor, writeValue(value: any): void { this._state = value === this.value; - if (isPresent(value)) { - this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state); - } + this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state); } registerOnChange(fn: (_: any) => {}): void { diff --git a/modules/@angular/forms/test/reactive_integration_spec.ts b/modules/@angular/forms/test/reactive_integration_spec.ts index 7685665643..5d5af1a75d 100644 --- a/modules/@angular/forms/test/reactive_integration_spec.ts +++ b/modules/@angular/forms/test/reactive_integration_spec.ts @@ -853,7 +853,7 @@ export function main() { describe('should support ', () => { - it('should support ', () => { + it('should support basic functionality', () => { const fixture = TestBed.createComponent(FormControlRadioButtons); const form = new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')}); @@ -880,6 +880,53 @@ export function main() { expect(inputs[1].nativeElement.checked).toEqual(true); }); + it('should support an initial undefined value', () => { + const fixture = TestBed.createComponent(FormControlRadioButtons); + const form = new FormGroup({'food': new FormControl(), 'drink': new FormControl()}); + fixture.componentInstance.form = form; + fixture.detectChanges(); + + const inputs = fixture.debugElement.queryAll(By.css('input')); + expect(inputs[0].nativeElement.checked).toEqual(false); + expect(inputs[1].nativeElement.checked).toEqual(false); + }); + + it('should reset properly', () => { + const fixture = TestBed.createComponent(FormControlRadioButtons); + const form = + new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')}); + fixture.componentInstance.form = form; + fixture.detectChanges(); + + form.reset(); + fixture.detectChanges(); + + const inputs = fixture.debugElement.queryAll(By.css('input')); + expect(inputs[0].nativeElement.checked).toEqual(false); + expect(inputs[1].nativeElement.checked).toEqual(false); + }); + + it('should set value to null and undefined properly', () => { + const fixture = TestBed.createComponent(FormControlRadioButtons); + const form = new FormGroup( + {'food': new FormControl('chicken'), 'drink': new FormControl('sprite')}); + fixture.componentInstance.form = form; + fixture.detectChanges(); + + form.get('food').setValue(null); + fixture.detectChanges(); + + const inputs = fixture.debugElement.queryAll(By.css('input')); + expect(inputs[0].nativeElement.checked).toEqual(false); + + form.get('food').setValue('chicken'); + fixture.detectChanges(); + + form.get('food').setValue(undefined); + fixture.detectChanges(); + expect(inputs[0].nativeElement.checked).toEqual(false); + }); + it('should use formControlName to group radio buttons when name is absent', () => { const fixture = TestBed.createComponent(FormControlRadioButtons); const foodCtrl = new FormControl('fish'); diff --git a/modules/@angular/forms/test/template_integration_spec.ts b/modules/@angular/forms/test/template_integration_spec.ts index 4e38493d27..0af59cbfc0 100644 --- a/modules/@angular/forms/test/template_integration_spec.ts +++ b/modules/@angular/forms/test/template_integration_spec.ts @@ -464,6 +464,60 @@ export function main() { expect(inputs[2].nativeElement.checked).toEqual(false); expect(inputs[3].nativeElement.checked).toEqual(true); })); + + it('should support initial undefined value', fakeAsync(() => { + const fixture = TestBed.createComponent(NgModelRadioForm); + fixture.detectChanges(); + tick(); + + const inputs = fixture.debugElement.queryAll(By.css('input')); + expect(inputs[0].nativeElement.checked).toEqual(false); + expect(inputs[1].nativeElement.checked).toEqual(false); + expect(inputs[2].nativeElement.checked).toEqual(false); + expect(inputs[3].nativeElement.checked).toEqual(false); + })); + + it('should support resetting properly', fakeAsync(() => { + const fixture = TestBed.createComponent(NgModelRadioForm); + fixture.componentInstance.food = 'chicken'; + fixture.detectChanges(); + tick(); + + const form = fixture.debugElement.query(By.css('form')); + dispatchEvent(form.nativeElement, 'reset'); + fixture.detectChanges(); + tick(); + + const inputs = fixture.debugElement.queryAll(By.css('input')); + expect(inputs[0].nativeElement.checked).toEqual(false); + expect(inputs[1].nativeElement.checked).toEqual(false); + })); + + it('should support setting value to null and undefined', fakeAsync(() => { + const fixture = TestBed.createComponent(NgModelRadioForm); + fixture.componentInstance.food = 'chicken'; + fixture.detectChanges(); + tick(); + + fixture.componentInstance.food = null; + fixture.detectChanges(); + tick(); + + const inputs = fixture.debugElement.queryAll(By.css('input')); + expect(inputs[0].nativeElement.checked).toEqual(false); + expect(inputs[1].nativeElement.checked).toEqual(false); + + fixture.componentInstance.food = 'chicken'; + fixture.detectChanges(); + tick(); + + fixture.componentInstance.food = undefined; + fixture.detectChanges(); + tick(); + expect(inputs[0].nativeElement.checked).toEqual(false); + expect(inputs[1].nativeElement.checked).toEqual(false); + })); + }); describe('select controls', () => {