javascript - リアクティブ（モデルベース）フォームのAngular 2 md-radioボタンが機能せず、md-input表示が停止する

Question

http://devdocs.io/angular~2_typescript/api/forms/index/radiocontrolvalueaccessor-directiveのリアクティブ フォーム ラジオ ボタンの手順に従い、 Angular 2.1.2 と Google の MD-alpha.10 Atom-typescript を使用しています。エラーなし。次のコンソール エラーが発生します。

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)

関連するコードは次のとおりです。

フォーム コンポーネントのビューのHTML

<form [formGroup]="registerApartment4RentForm" (submit)="onSubmit($event)">

<p id="petsPolicy" class="required" aria-labelledby="petsPolicy"
  i18n="select summary pets policy">Pets Policy - Summarized</p>
<md-radio-group>
  <md-radio-button i18n="No pets allowed" value="no_pets" formControlName="pets">No pets allowed</md-radio-button>
  <md-radio-button i18n="Cats allowed" value="cats_allowed" formControlName="pets">Cats allowed</md-radio-button>
</md-radio-group>

フォームを管理するコンポーネント

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( )
  });
}

FormControlName をインポートしようとしましたが、役に立ちませんでした。エラーステートメントに加えて、新しいボタンがクリックされてもラジオボタンは切り替わりません。ボタンの円は、1つではなく2つ並んで表示されます。また、すべての md 入力が表示されません。いつ

formControlName="pets"

md-ratio-button HTML から削除すると、md-inputs が再表示されて機能します。

リアクティブ フォームの devdocs からコードをコピーし、変数名を変更しました。md-radio-buttons を機能させるには、他に何をする必要がありますか?