title: Using Radio buttons in angular2 Control Array
body: <p>Hello I have a control array which consists of control group, and the looping the control array in the template to create radio buttons. I am able to select all the radio buttons eventhough they belong to the different control group and has different name for them...I have made a plunker demo here <a href="http://plnkr.co/edit/jTMZUCj5JVFazlZo7e4W?p=preview" rel="nofollow">http://plnkr.co/edit/jTMZUCj5JVFazlZo7e4W?p=preview</a> (the plunker demo is in beta 9) ... When i remove the [ngFormControl] it works perfectly...
  can somebody please tell me the correct way to implement that?</p>
  
  <pre class="lang-ts prettyprint-override"><code>  ArrayData=['abhi','rahul'];
  
  ArrayControl=new ControlArray([]);
  
  constructor(fb: FormBuilder) {  
  
  this.ArrayControl=new ControlArray([]);
  
  for(var i=0;i&lt;this.ArrayData.length;i++){
    let myForm = fb.group({
    'Male':  ['', Validators.required]  ,
    'Female':  ['', Validators.required]
  }); 
  
    this.ArrayControl.push(myForm);
  }
  
  }
  </code></pre>
  
  <p>This is how i am creating the control array...</p>
  
  <pre class="lang-ts prettyprint-override"><code>        &lt;div *ngFor="#control of ArrayControl.controls;#i=index"&gt;
        &lt;input type="radio" name="{{i}}" value="male" [ngFormControl]="control.controls['Male']"&gt; Male&lt;br&gt;
        &lt;input type="radio" name="{{i}}" value="female" [ngFormControl]="control.controls['Female']"&gt; Female&lt;br&gt;
        &lt;hr&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In this way i am looping the template...
  Can somebody please tell me where i am doing wrong?</p>