title: Angular 2, Material 2 Radio, Formgroups
body: <p>I am trying to get Angular 2 and Material 2 working together with a <code>FormGroup</code> and an <code>&lt;md-radio&gt;</code> component. However when I wire it up like I would with a standard <code>&lt;md-input&gt;</code> if throws an error. For example</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="myFormGroup (ngSubmit)="doSomething()"&gt;          
  &lt;md-input #birthday formControlName="birthday" placeholder="Birthday"&gt;&lt;/md-input&gt;
  &lt;md-radio-group formControlName="gender" align="end"&gt;
      &lt;md-radio-button value="m"&gt;Male&lt;/md-radio-button&gt;
      &lt;md-radio-button value="f"&gt;Female&lt;/md-radio-button&gt;
  &lt;/md-radio-group&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>export class Component {
  
      myFormGroup: FormGroup;
  
      constructor(formBuilder: FormBuilder) {
          this.myFormGroup = formBuilder.group({
              birthday: [this.myModel.birthday, Validators.required],
              gender: [this.myModel.gender, Validators.required]
          });
      }
  }
  </code></pre>
  
  <p>The error message this gives me is: </p>
  
  <blockquote>
    <p>ngModel cannot be used to register form controls with a parent
    formGroup directive.  Try using
          formGroup's partner directive "formControlName" instead.  Example:</p>
  
  <pre><code>&lt;div [formGroup]="myGroup"&gt;
    &lt;input formControlName="firstName"&gt;
  &lt;/div&gt;
  
  In your class:
  
  this.myGroup = new FormGroup({
     firstName: new FormControl()
  });
  
    Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:
  
    Example:
  
  
  &lt;div [formGroup]="myGroup"&gt;
     &lt;input formControlName="firstName"&gt;
     &lt;input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}"&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>Even if I change the formgroup to:</p>
  
  <pre><code>this.myFormGroup = formBuilder.group({
                  birthday: [this.myModel.birthday, Validators.required],
                  gender: new FormControl()
              });
  </code></pre>
  
  <p>I still receive the same error. </p>
  
  <p>How do I use a material 2 <code>&lt;md-radio&gt;</code> component together with a FormGroup in Angular 2? Any help would be appreciated. </p>
  
  <p>Many thanks.</p>
  
  <p>JT</p>