角度2のラジオボタンのデフォルト値を設定するにはどうすればいいですか

Question

私はモデル駆動型を持っており、ラジオ入力に基づいてフィールドを表示する必要があります。 コード： -

 <div class="form-group"> 
      <md-radio-group class="form-control" id="radio1" formControlName="selection"> 
      <md-radio-button [value]="A" >A</md-radio-button> 
      <md-radio-button [value]="B">B</md-radio-button> 
      </md-radio-group> 
     </div> 

     <div class="form-group" *ngIf="selection.value=='A'"> 
      <md-input-container> 
       <textarea md-input placeholder="A" class="form-control" 
         formControlName="A" 
         style="border:none;"></textarea> 
      </md-input-container> 
     </div> 
     <div class="form-group" *ngIf="selection.value=='B'"> 
      <md-input-container> 
      <input md-input placeholder="B" class="form-control" 
        formControlName="B" 
        style="border:none;"> 
      </md-input-container>    
     </div> 

何のラジオが選択されていないとして 「未定義のプロパティ 『値』を読み込めません」などのエラーを取得します。

最初のものをデフォルトとして選択する方法を指定できます。

Answer 1

ラジオの値としてstringを渡す必要があります。今すぐAngularは、Aという名前の変数を見つけようとします。あなたが応じてコンポーネントにselection.valueに値を代入するよう

<md-radio-group class="form-control" [(ngModel)]="selection.value" 
       id="radio1" formControlName="selection"> 
    <md-radio-button [value]="'A'">A</md-radio-button> 
    <md-radio-button [value]="'B'">B</md-radio-button> 
</md-radio-group> 

あなたはラジオを初期化：

class MyRadioComponent { 
    selection = {"value":"A"}; 
} 

Answer 2

selection formControlはまだcreated.Thereではありませんので、あなたはこのエラーを取得しているが、このための2つの可能な解決策です。

1. *ngIf=selection?.value=='A'として使用safe navigation operator（?.）ラジオの値にアクセスします。任意のフォームコントロールに

   <div class="form-group" *ngIf="selection?.value=='A'"> 
       <md-input-container> 
        <textarea md-input placeholder="A" class="form-control" 
          formControlName="A" 
          style="border:none;"></textarea> 
       </md-input-container> 
   </div> 
   

2. ビューがレンダリングされる前に、フォームを準備します。（つまり、コンポーネントのコンストラクタでフォームを準備します。）

、デフォルト値、我々が作成したときに与えられますフォームコントロール。

例えば、selectionのデフォルト値を次のように設定することができます。

let myForm = new FormGroup({ selection : new FormControl('A') }) 

Answer 3

これを試してみてください：

this.complexForm = fb.group({ 
         'name': [null, Validators.required], 
         'description': [null, Validators.required], 
         'file': ["A", Validators.required], 
        });