Angular2反応型：* ngIf内のフィールドを検証

Question

私はmd-selectとmd-radio-buttonフィールドのフォームを持っています。ラジオボタンの下のオプションは、md-selectで選択されたオプションに従って表示されます。 plunkerにアクセスしてください。

私は、必要とされる副生物のラジオボタンフィールドを使用してフォームを作成したことがわかります。最初の負荷で動作します。しかし、任意のラジオボタンオプションを選択して生物選択ボックスを変更すると、フォームは有効なサブオルガニズム値を持たずに有効です。サブラジオボタンがチェックされていない場合は、フォームが無効である必要があります。助けてください。

質問2：plunkでは、app.component.tsの47行目以降の次の行のコメントを解除して、フィールドのデフォルト値があるようにしてください。サブ生物のラジオボタンが表示されますが、選択ボックスは空白になります。選択された値があり、サブ生物フィールドが表示される理由があります。生物がmd-selectに選択されていない理由はわかりません。

Answer 1

選択の変更、およびフォームが検証された場合、あなたはnullにselected.sub_organism_idの値をリセットできるようにします。md-selectにchangeイベントを追加フォームが無効になります。

コードスニペット：

HTML：

<md-select [formControl]="form.controls['organism']" 
      style="width:100%;" 
      [(ngModel)]="selected.organism_id" 
      (change)="resetForm($event)"> 
    <md-option *ngFor="let organism_id of getIds()" [value]="organism_id"> 
    {{ organisms[organism_id].name }} 
    </md-option> 
</md-select> 

TS：

resetForm(org){ 
    if(this.form.valid){ 
    this.selected.sub_organism_id = null; 
    }; 
} 

Edited Plunk

更新：

@WillHowellのコメントのように、「md-selectはオブジェクト値ではなくオブジェクト参照による値を比較します。私はあなたのデータを配列 - オブジェクト関係に変更し、md-selectのデフォルト値はhereであった。