角2、材質2ラジオ、フォームグループ

Question

角度2と材質2をFormGroupと<md-radio>のコンポーネントと共に使用しようとしています。しかし、標準の<md-input>のように私がそれを配線すると、エラーがスローされます。たとえば、これは私を与え

component.html

<form [formGroup]="myFormGroup (ngSubmit)="doSomething()">   
<md-input #birthday formControlName="birthday" placeholder="Birthday"></md-input> 
<md-radio-group formControlName="gender" align="end"> 
    <md-radio-button value="m">Male</md-radio-button> 
    <md-radio-button value="f">Female</md-radio-button> 
</md-radio-group> 
</form> 

component.ts

export class Component { 

    myFormGroup: FormGroup; 

    constructor(formBuilder: FormBuilder) { 
     this.myFormGroup = formBuilder.group({ 
      birthday: [this.myModel.birthday, Validators.required], 
      gender: [this.myModel.gender, Validators.required] 
     }); 
    } 
} 

エラーメッセージは次のとおりです。

ngModelを登録するために使用することはできません親を持つフォームコントロール formGroupディレクティブ。代わりに formGroupのパートナー指示文 "formControlName"を使用してみてください。例：

<div [formGroup]="myGroup"> 
    <input formControlName="firstName"> 
</div> 

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: 


<div [formGroup]="myGroup"> 
    <input formControlName="firstName"> 
    <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}"> 
</div> 

私はformgroupを変更しても：

this.myFormGroup = formBuilder.group({ 
       birthday: [this.myModel.birthday, Validators.required], 
       gender: new FormControl() 
      }); 

私はまだ同じエラーが表示されます。

どのように材料2 <md-radio>をFormGroupと共にAngular 2で使用しますか？どんな助けもありがとう。

多くのありがとうございます。

JT

Answer 1

私は最近、この問題にぶつかった、と私はそれが「値」のアクセスを使用して動作するようになりました。 値がradio-button-valueと等しい場合は、デフォルト値を設定します。 はあなたのコードで働い：

import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { Component } from '@angular/core'; 
myFormGroup: FormGroup; 

export class Component { 

    constructor(private formBuilder: FormBuilder) { 
     this.myFormGroup = formBuilder.group({ 
      'birthday': ['', Validators.required], 
      'gender': ['m', Validators.required] 
     }); 
    } 
} 

そして、テンプレート用：

<form [formGroup]="myFormGroup" (ngSubmit)="doSomething()">   
<md-input #birthday formControlName="birthday" placeholder="Birthday"></md-input> 
<md-radio-group formControlName="gender" align="end"> 
    <md-radio-button value="m">Male</md-radio-button> 
    <md-radio-button value="f">Female</md-radio-button> 
</md-radio-group> 
<button 
     [disabled]="!myFormGroup.valid" 
     md-raised-button 
     >Valid 
     </button> 
</form> 

あなたがクリックすることで機能を実行したい場合は、それがクリックされるたびに起動される持つEventEmitterがあります。

<md-radio-group formControlName="gender (change)="genderChanged($event.value)" 

この機能を実装する必要があるのはTSだけです。ただ

console.log("data from form:', this.myFormGroup.value); 

ご希望により

あり、フォームの値にアクセスする方法は、これは誰かに答え、ビットの第1の時間をあなたの質問に答えました。 ：D