選択値として角度4 /反応性形とJSON

Question

私はコンポーネントで作成された反応性のフォームを持っている：

this.details = this.FormBuilder.group({ 
    status: {} 
}); 

はその後、私のテンプレートでは、私が持っている：

<select class="form-control" formControlName="status"> 
    <option *ngFor="let status of formValues?.status" [ngValue]="status">{{status.name}} {{status.description}}</option> 
</select> 

とOnChanges呼ば：

を

this.details.setValue({ 
    status: this.data.status 
    }); 

アイデアは、私は値としてオブジェクトを持たなければならない単一の選択があるということです。私は3つのformControlsに分割されなければならないので、入れ子になったformGroupとしてステータスを作ることはできません。 setValueにもかかわらず、すべてうまく動作します。私の選択は、デフォルトのデータを取得していません。しかし、selectでオプションを変更すると、フォームモデルが正しく更新されます。

アイデア:)？オプションの構文オフまず

Answer 1

は次のとおりです。 <option *ngFor="let entry of entries" [value]="entry">{{entry}}</option> のでvalueの代わりngValue。第二に、今は両面データを使用する必要があります。値は、テンプレートからモデルにのみ放出され、他の方法では放出されません。 そうに[(ngModel)]を追加するには、select

<select [(ngModel)]=status...>

私はあなたがngForループstatus:{}と*ngFor="let status of formValues?.status

使用例とにおける衝突を持っていないので、フォームビルダで名前を変更する提案もう一つngModelと公式ドキュメントから選択（下のリンク）：

<div class="form-group"> <label for="power">Hero Power</label> <select class="form-control" id="power" required [(ngModel)]="model.power" name="power"> <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> </select> </div>

[1]

Answer 2

https://angular.io/guide/formsコンポーネントにこのコードを追加します。
代わりに "StatusModel" の

compareFn(c1: StatusModel, c2: StatusModel): boolean { 
    return c1 && c2 ? c1.id === c2.id : c1 === c2; 
} 

、フォームステータスモデルを挿入します。

、テンプレートに結合追加：私が使用なぜ[値]を使用する場合、それだけで[対象オブジェクト]を示す選択の

<select class="form-control" formControlName="status" 
     [compareWith]="compareFn"<!-- binding --> 
    <option *ngFor="let status of formValues?.status" 
      [ngValue]="status"> 
     {{status.name}} {{status.description}} 
    </option> 
</select>