wip: proposal solution - simplyfied + tests

Author: mseemann

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

@@ -18,7 +18,7 @@ import {
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor,
-  FormsModule
+  FormsModule, FormGroupName
 } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { BooleanProperty } from '../common/boolean-property';
@@ -34,13 +34,13 @@ const IS_FOCUSED = 'is-focused';
 @Injectable()
 export class MdlRadioGroupRegisty {
 
-  private defaultRadioGroup  = new MdlRadioGroup();
-  private radioComponents: {radio: MdlRadioComponent, group:MdlRadioGroup}[] = [];
+  private defaultFormGroup  = 'defaultFromGroup';
+  private radioComponents: {radio: MdlRadioComponent, group: FormGroupName | string}[] = [];
 
-  public add(radioComponent: MdlRadioComponent, mdlRadioGroup: MdlRadioGroup) {
+  public add(radioComponent: MdlRadioComponent, formGroupName: FormGroupName) {
     this.radioComponents.push({
       radio: radioComponent,
-      group: mdlRadioGroup || this.defaultRadioGroup
+      group: formGroupName || this.defaultFormGroup
     });
   }
 
@@ -50,12 +50,12 @@ export class MdlRadioGroupRegisty {
     });
   }
 
-  public select(radioComponent: MdlRadioComponent, mdlRadioGroup: MdlRadioGroup) {
+  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 testGroup = mdlRadioGroup || this.defaultRadioGroup;
+    let groupToTest = formGroupName || this.defaultFormGroup;
     this.radioComponents.forEach( (component) => {
-      if (component.radio.name === radioComponent.name && component.group === testGroup) {
+      if (component.radio.name === radioComponent.name && component.group === groupToTest) {
         if (component.radio !== radioComponent) {
           component.radio.deselect(radioComponent.value);
         }
@@ -64,12 +64,6 @@ export class MdlRadioGroupRegisty {
   }
 }
 
-@Directive({
-  selector: '[formGroupName][mdl-radio-group]'
-})
-export class MdlRadioGroup {
-}
-
 /*
  <mdl-radio name="group1" value="1" [(ngModel)]="radioOption">Value 1</mdl-radio>
  */
@@ -123,7 +117,7 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
     private elementRef: ElementRef,
     private renderer: Renderer,
     private ragioGroupRegisty: MdlRadioGroupRegisty,
-    @Optional() private mdlRadioGroup: MdlRadioGroup) {
+    @Optional() private formGroupName: FormGroupName) {
     this.el = elementRef.nativeElement;
   }
 
@@ -132,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, this.mdlRadioGroup);
+    // 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() {
@@ -155,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.mdlRadioGroup);
+      this.ragioGroupRegisty.select(this, this.formGroupName);
     };
   }
 
@@ -209,8 +204,8 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
 
 @NgModule({
   imports: [CommonModule, FormsModule],
-  exports: [MdlRadioComponent, MdlRadioGroup],
-  declarations: [MdlRadioComponent, MdlRadioGroup]
+  exports: [MdlRadioComponent],
+  declarations: [MdlRadioComponent]
 })
 export class MdlRadioModule {
   public static forRoot(): ModuleWithProviders {