fix(forms): make radio button selection logic more flexible

Closes #9558
angular · Jun 27, 2016 · d49df66 · d49df66
1 parent 5cc7b41
commit d49df66
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/modules/@angular/forms/src/directives/radio_control_value_accessor.ts b/modules/@angular/forms/src/directives/radio_control_value_accessor.ts
@@ -51,6 +51,7 @@ export class RadioControlRegistry {
 
   private _isSameGroup(
       controlPair: [NgControl, RadioControlValueAccessor], accessor: RadioControlValueAccessor) {
+    if (!controlPair[0].control) return false;
     return controlPair[0].control.root === accessor._control.control.root &&
         controlPair[1].name === accessor.name;
   }

diff --git a/modules/@angular/forms/test/integration_spec.ts b/modules/@angular/forms/test/integration_spec.ts
@@ -615,6 +615,45 @@ export function main() {
                    });
              }));
 
+      it('should support removing controls from <type=radio>',
+         inject(
+             [TestComponentBuilder, AsyncTestCompleter],
+             (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
+               const t = `
+                <input type="radio" [formControl]="showRadio" value="yes">
+                <input type="radio" [formControl]="showRadio" value="no">
+                <form [formGroup]="form">
+                  <div *ngIf="showRadio.value === 'yes'">
+                    <input type="radio" formControlName="food" value="chicken">
+                    <input type="radio" formControlName="food" value="fish">
+                  </div>
+                </form>`;
+
+               const ctrl = new FormControl('fish');
+               const showRadio = new FormControl('yes');
+               const form = new FormGroup({'food': ctrl});
+
+               tcb.overrideTemplate(MyComp8, t)
+                   .overrideProviders(MyComp8, providerArr)
+                   .createAsync(MyComp8)
+                   .then((fixture) => {
+                     fixture.debugElement.componentInstance.form = form;
+                     fixture.debugElement.componentInstance.showRadio = showRadio;
+                     showRadio.valueChanges.subscribe((change) => {
+                       (change === 'yes') ? form.addControl('food', new FormControl('fish')) :
+                                            form.removeControl('food');
+                     });
+                     fixture.detectChanges();
+
+                     const input = fixture.debugElement.query(By.css('[value="no"]'));
+                     dispatchEvent(input.nativeElement, 'change');
+
+                     fixture.detectChanges();
+                     expect(form.value).toEqual({});
+                     async.done();
+                   });
+             }));
+
       describe('should support <select>', () => {
         it('with basic selection',
            inject(