fix(forms): fix resetting radios (#11546)

Closes #11516

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 {

modules/@angular/forms/test/reactive_integration_spec.ts

@@ -853,7 +853,7 @@ export function main() {
 
       describe('should support <type=radio>', () => {
 
-        it('should support <type=radio>', () => {
+        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');

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', () => {