title: Angular 2 md-radio buttons in reactive (model based) forms don't work & stop md-input display
body: <p>I am following instructions for reactive form radio buttons at <a href="http://devdocs.io/angular~2_typescript/api/forms/index/radiocontrolvalueaccessor-directive" rel="nofollow noreferrer">http://devdocs.io/angular~2_typescript/api/forms/index/radiocontrolvalueaccessor-directive</a>  and using Angular 2.1.2 and Google's MD-alpha.10 Atom-typescript says I have no errors. I get the following console errors.</p>
  
  <pre><code>core.umd.js:3004 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/components/input/postApartment4Rent.component.html:47:62 caused by: No value accessor for form control with name: 'pets'
  Error: No value accessor for form control with name: 'pets'
  at _throwError (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:1231:15)
  at setUpControl (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:1171:13)
  at FormGroupDirective.addControl (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:3595:13)
  at FormControlName._setUpControl (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:4029:48)
  at FormControlName.ngOnChanges (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:3975:22)
  at Wrapper_FormControlName.detectChangesInInputProps (/ReactiveFormsModule/FormControlName/wrapper.ngfactory.js:44:18)
  at _View_PostApartmentComponent0.detectChangesInternal (/AppModule/PostApartmentComponent/component.ngfactory.js:4994:30)
  at _View_PostApartmentComponent0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
  at _View_PostApartmentComponent0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
  at _View_PostApartmentComponent_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9331:23)
  </code></pre>
  
  <p>Relevant code is the following:</p>
  
  <p><strong>HTML</strong> for form component's view</p>
  
  <pre><code>&lt;form [formGroup]="registerApartment4RentForm" (submit)="onSubmit($event)"&gt;
  
  &lt;p id="petsPolicy" class="required" aria-labelledby="petsPolicy"
    i18n="select summary pets policy"&gt;Pets Policy - Summarized&lt;/p&gt;
  &lt;md-radio-group&gt;
    &lt;md-radio-button i18n="No pets allowed" value="no_pets" formControlName="pets"&gt;No pets allowed&lt;/md-radio-button&gt;
    &lt;md-radio-button i18n="Cats allowed" value="cats_allowed" formControlName="pets"&gt;Cats allowed&lt;/md-radio-button&gt;
  &lt;/md-radio-group&gt;
  </code></pre>
  
  <p><strong>Component</strong> to manage the form</p>
  
  <pre><code>import { Component } from "@angular/core";
  import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
  
  @Component({ ...etc.})
  
  export class PostApartmentComponent {
    registerApartment4RentForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {
      this.registerApartment4RentForm = this.formBuilder.group({
      city: '',
      zipCode: '',
      streetAddress: '',
      pets: ''
      });
     }
    }
    form = new FormGroup({
    pets: new FormControl( )
    });
  }
  </code></pre>
  
  <p>I tried importing FormControlName, but it did not help. In addition to the error statement, the radio buttons don't switch as a new button gets clicked and the button circles appear as 2 side by side, instead of 1 inside the other. Also all the md-inputs do not display. When </p>
  
  <pre><code>formControlName="pets"
  </code></pre>
  
  <p>is removed from the md-ratio-button HTML, the md-inputs re-appear and work.</p>
  
  <p>I've copied code out of the devdocs for reactive forms and changed variable names. What else has to be done to get md-radio-buttons working?</p>