Merge pull request #209 from mseemann/fix205

wip: proposal solution

Author: mseemann

src/demo-app/app/reactiveforms/reactiveform.component.html

@@ -137,3 +137,18 @@ <h4>Reactive Forms Example</h4>
 </pre>
 <a href="https://gist.github.com/mseemann/39d50d07a191be1df2c2d8f5ea244f7d" target="gist_angular2-mdl">Complete SourceCode</a>
 <br/>
+
+<div>
+GroupTest:
+<form [formGroup]="testForm">
+  <div formGroupName="group1" mdl-radio-group>
+    <mdl-radio formControlName="type" value="type1"></mdl-radio>
+    <mdl-radio formControlName="type" value="type2"></mdl-radio>
+  </div>
+  <div formGroupName="group2">
+    <mdl-radio formControlName="type" value="type1"></mdl-radio>
+    <mdl-radio formControlName="type" value="type2"></mdl-radio>
+  </div>
+</form>
+ <br/>
+</div>

src/demo-app/app/reactiveforms/reactiveform.component.ts

@@ -40,6 +40,7 @@ export class ReactiveFormsDemo extends AbstractDemoComponent implements OnInit {
   public breakfast = new FormControl('Continental');
   public toDrink = new FormControl('Tea');
 
+  public testForm: FormGroup;
 
   constructor(router: Router, route: ActivatedRoute, titleService: Title, private fb: FormBuilder) {
     super(router, route, titleService);
@@ -64,6 +65,16 @@ export class ReactiveFormsDemo extends AbstractDemoComponent implements OnInit {
       .subscribe((formValues) => {
         console.log(`Model Driven Form valid: ${this.form.valid} value:`, JSON.stringify(formValues));
       });
+
+    // testform radio buttons inside groups
+    this.testForm = new FormGroup({
+      group1: new FormGroup({
+        type: new FormControl('')
+      }),
+      group2: new FormGroup({
+        type: new FormControl('')
+      })
+    });
   }
 
   public onSubmit() {

src/lib/components/radio/mdl-radio.component.spec.ts

@@ -10,7 +10,7 @@ describe('Component: MdlRadio', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [ MdlRadioModule.forRoot(), FormsModule, ReactiveFormsModule ],
-      declarations: [ MdlTestRadioComponent ],
+      declarations: [ MdlTestRadioComponent, MdlTestUseSameRadioInGroupsComponent ],
     });
   }));
 
@@ -161,6 +161,29 @@ describe('Component: MdlRadio', () => {
 
   }));
 
+
+  it('should be possible to use the same radio buttons in different groups', () => {
+    let fixture = TestBed.createComponent(MdlTestUseSameRadioInGroupsComponent);
+    fixture.detectChanges();
+
+    let g1t1Elem = fixture.debugElement.query(By.css('#g1t1')).nativeElement;
+    let g1t2Elem = fixture.debugElement.query(By.css('#g1t2')).nativeElement;
+    let g2t1Elem = fixture.debugElement.query(By.css('#g2t1')).nativeElement;
+
+    g1t1Elem.click();
+    fixture.detectChanges();
+
+    expect(g1t1Elem.classList.contains('is-checked')).toBe(true, 'the clicked one should be selected');
+    expect(g2t1Elem.classList.contains('is-checked')).toBe(false, 'the not clicked one should not be selected');
+
+    g1t2Elem.click();
+    fixture.detectChanges();
+
+    expect(g1t1Elem.classList.contains('is-checked')).toBe(false, 'the not clicked one should not be selected');
+    expect(g2t1Elem.classList.contains('is-checked')).toBe(false, 'the not clicked one should not be selected');
+
+
+  });
 });
 
 
@@ -192,3 +215,36 @@ class MdlTestRadioComponent implements OnInit {
 }
 
 
+@Component({
+  selector: 'test-radio',
+  template: `
+    <form [formGroup]="testForm">
+      <div formGroupName="group1" mdl-radio-group>
+        <mdl-radio formControlName="type" value="type1" id="g1t1"></mdl-radio>
+        <mdl-radio formControlName="type" value="type2" id="g1t2"></mdl-radio>
+      </div>
+      <div formGroupName="group2">
+        <mdl-radio formControlName="type" value="type1" id="g2t1"></mdl-radio>
+        <mdl-radio formControlName="type" value="type2" id="g2t2"></mdl-radio>
+      </div>
+    </form>
+  `
+})
+class MdlTestUseSameRadioInGroupsComponent implements OnInit {
+
+  public testForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  public ngOnInit() {
+    this.testForm = new FormGroup({
+      group1: new FormGroup({
+        type: new FormControl('')
+      }),
+      group2: new FormGroup({
+        type: new FormControl('')
+      })
+    });
+  }
+
+}

src/lib/components/radio/mdl-radio.component.ts

@@ -11,16 +11,19 @@ import {
   Injectable,
   OnDestroy,
   ViewEncapsulation,
-  ModuleWithProviders
+  ModuleWithProviders,
+  Optional
 } from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor,
-  FormsModule
+  FormsModule,
+  FormGroupName
 } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { BooleanProperty } from '../common/boolean-property';
 
+
 const noop = () => {};
 const IS_FOCUSED = 'is-focused';
 
@@ -31,22 +34,30 @@ const IS_FOCUSED = 'is-focused';
 @Injectable()
 export class MdlRadioGroupRegisty {
 
-  private radioComponents: any[] = [];
+  private defaultFormGroup  = 'defaultFromGroup';
+  private radioComponents: {radio: MdlRadioComponent, group: FormGroupName | string}[] = [];
 
-  public add(radioComponent: MdlRadioComponent) {
-    this.radioComponents.push(radioComponent);
+  public add(radioComponent: MdlRadioComponent, formGroupName: FormGroupName) {
+    this.radioComponents.push({
+      radio: radioComponent,
+      group: formGroupName || this.defaultFormGroup
+    });
   }
 
   public remove(radioComponent: MdlRadioComponent) {
-    this.radioComponents.slice(this.radioComponents.indexOf(radioComponent), 1);
+    this.radioComponents = this.radioComponents.filter( (radioComponentInArray) => {
+      return (radioComponentInArray.radio !== radioComponent);
+    });
   }
 
-  public select(radioComponent: MdlRadioComponent) {
-    // unselect evenry radioComponent that is not the provided radiocomponent and has the same name
+  public select(radioComponent: MdlRadioComponent, formGroupName: FormGroupName) {
+    // unselect every radioComponent that is not the provided radiocomponent
+    // and has the same name and is in teh same group.
+    let groupToTest = formGroupName || this.defaultFormGroup;
     this.radioComponents.forEach( (component) => {
-      if (component.name === radioComponent.name) {
-        if (component !== radioComponent) {
-          component.deselect(radioComponent.value);
+      if (component.radio.name === radioComponent.name && component.group === groupToTest) {
+        if (component.radio !== radioComponent) {
+          component.radio.deselect(radioComponent.value);
         }
       }
     });
@@ -105,7 +116,8 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer,
-    private ragioGroupRegisty: MdlRadioGroupRegisty) {
+    private ragioGroupRegisty: MdlRadioGroupRegisty,
+    @Optional() private formGroupName: FormGroupName) {
     this.el = elementRef.nativeElement;
   }
 
@@ -114,8 +126,9 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
     // a radio group without name is useless.
     this.checkName();
     // register the radio button - this is the only chance to unselect the
-    // radio button that is no longer active
-    this.ragioGroupRegisty.add(this);
+    // radio button that is no longer active - scope the radio button with it's group
+    // if there is one.
+    this.ragioGroupRegisty.add(this, this.formGroupName);
   }
 
   public ngOnDestroy() {
@@ -137,7 +150,7 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
     // wrap the callback, so that we can call select on the registry
     this.onChangeCallback = () => {
       fn(this.value);
-      this.ragioGroupRegisty.select(this);
+      this.ragioGroupRegisty.select(this, this.formGroupName);
     };
   }