wip: proposel 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

@@ -8,7 +8,7 @@ import {
   FormGroup,
   FormControl,
   Validators,
-  FormBuilder
+  FormBuilder, Form
 } from '@angular/forms';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/map';
@@ -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.ts

@@ -11,7 +11,9 @@ import {
   Injectable,
   OnDestroy,
   ViewEncapsulation,
-  ModuleWithProviders
+  ModuleWithProviders,
+  Optional,
+  Inject, SkipSelf, Directive
 } from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
@@ -21,6 +23,7 @@ import {
 import { CommonModule } from '@angular/common';
 import { BooleanProperty } from '../common/boolean-property';
 
+
 const noop = () => {};
 const IS_FOCUSED = 'is-focused';
 
@@ -31,28 +34,42 @@ const IS_FOCUSED = 'is-focused';
 @Injectable()
 export class MdlRadioGroupRegisty {
 
-  private radioComponents: any[] = [];
+  private defaultRadioGroup  = new MdlRadioGroup();
+  private radioComponents: {radio: MdlRadioComponent, group:MdlRadioGroup}[] = [];
 
-  public add(radioComponent: MdlRadioComponent) {
-    this.radioComponents.push(radioComponent);
+  public add(radioComponent: MdlRadioComponent, mdlRadioGroup: MdlRadioGroup) {
+    this.radioComponents.push({
+      radio: radioComponent,
+      group: mdlRadioGroup || this.defaultRadioGroup
+    });
   }
 
   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, mdlRadioGroup: MdlRadioGroup) {
+    // 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;
     this.radioComponents.forEach( (component) => {
-      if (component.name === radioComponent.name) {
-        if (component !== radioComponent) {
-          component.deselect(radioComponent.value);
+      if (component.radio.name === radioComponent.name && component.group === testGroup) {
+        if (component.radio !== radioComponent) {
+          component.radio.deselect(radioComponent.value);
         }
       }
     });
   }
 }
 
+@Directive({
+  selector: '[formGroupName][mdl-radio-group]'
+})
+export class MdlRadioGroup {
+}
+
 /*
  <mdl-radio name="group1" value="1" [(ngModel)]="radioOption">Value 1</mdl-radio>
  */
@@ -105,7 +122,8 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer,
-    private ragioGroupRegisty: MdlRadioGroupRegisty) {
+    private ragioGroupRegisty: MdlRadioGroupRegisty,
+    @Optional() private mdlRadioGroup: MdlRadioGroup) {
     this.el = elementRef.nativeElement;
   }
 
@@ -115,7 +133,7 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
     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.ragioGroupRegisty.add(this, this.mdlRadioGroup);
   }
 
   public ngOnDestroy() {
@@ -137,7 +155,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.mdlRadioGroup);
     };
   }
 
@@ -191,8 +209,8 @@ export class MdlRadioComponent implements ControlValueAccessor, OnInit, OnDestro
 
 @NgModule({
   imports: [CommonModule, FormsModule],
-  exports: [MdlRadioComponent],
-  declarations: [MdlRadioComponent]
+  exports: [MdlRadioComponent, MdlRadioGroup],
+  declarations: [MdlRadioComponent, MdlRadioGroup]
 })
 export class MdlRadioModule {
   public static forRoot(): ModuleWithProviders {