リアクティブフォームで選択オプションにデフォルト値を設定する

Question

以前に選択したものに応じてデフォルト値を設定するにはどうすればよいですか。私が何かを編集してドロップダウンを持っているように、以前に提出したデフォルト値を見ることができるので、ユーザを混乱させることはありません。例えば、私のコードでは、編集ボタンをクリックすると私をページにリダイレクトし、以下の "patchValues（）"関数を起動し、サプライヤのリストから選択することができます。私が欲しいのは、私が編集ボタンをクリックした場合、私は選択オプション

TS

patchValues() { 
    let suppliers = this.myForm.get('suppliers') as FormArray; 
    this.material.suppliers.forEach(supplier => { 
     suppliers.push(this.fb.group({ 
     supplier_id: supplier.name, 
    })) 
    }) 
    } 

HTML

<tr *ngFor="let row of myForm.controls.suppliers.controls; let i = index" [formGroupName]="i"> 
      <td> 
       <select formControlName="supplier_id" class="col-md-12" > 
       <option *ngFor="let supplier of suppliers" [value]="supplier.id"> 
        {{supplier.name}} 
       </option> 
       </select> 
      </td> 
    </tr> 

Answer 1

のようないくつかのことを試すことができます。今、もし

this.material.suppliers.forEach(supplier => { 
    suppliers.push(this.fb.group({ 
    supplier_id: supplier.id 
})) 

：あなたが名前の代わりに実際のIDをプッシュするように思われる

<option value="">Select supplier...</option> 
<option *ngFor="let supplier of suppliers" [ngValue]="supplier.id"> 
    {{supplier.name}} 
</option> 

とあなたのpatchValuesで

：あなたは、そのフィールドが何も事前に値がない場合のデフォルトのオプションを持っていますサプライヤIDがない場合、サプライヤIDが空の文字列の場合は、デフォルトのオプション "Select Supp ..."が選択されます。それは価値が nullなるとしたら、あなたがしたいと思います例えば、あなたがそれに応じてテンプレートを調整する必要が空の文字列ではない場合：

<option value="null">Select supplier...</option> 

Answer 2

にデフォルト値を見ることができるということですという変数を(change)でトラックすることもできますtはselectです。あなたはそれを編集モードが起動されたときに設定するために[(ngModel)]="selectedSupplierId"にバインドすることができます。例えば

：

HTML：

<select [(ngModel)]="selectedSupplierId" (change)=onSuppChange($event.target.value) formControlName="supplier_id" class="col-md-12" > 
    <option *ngFor="let supplier of suppliers" [value]="supplier.id"> 
      {{supplier.name}} 
    </option> 
</select> 

TS：

private selectedSupplierId: any; //specify type if you can 

private onSuppChange(value): void { 
    this.selectedSupplierId = value; 
} 

EDIT：foreachで後プレースホルダをしたい場合は...

<select [(ngModel)]="selectedSupplierId" (change)=onSuppChange($event.target.value) formControlName="supplier_id" class="col-md-12" > 
    <option value="-1">Placeholder text..</option> 
    <option *ngFor="let supplier of suppliers" [value]="supplier.id"> 
      {{supplier.name}} 
    </option> 
</select> 

patchValues()をsupplier.id = -1と設定します。

クレジットBaconbeastnz's answer

Answer 3

あなたがうまくいけば、私が正しくあなたの質問を理解しています。この

<form [formGroup]="test"> 
    <div class="col-sm-6 form-group"> 
     <label>Industry</label> 
     <select class="form-control select" formControlName="Industry"> 
     <option [selected] = "true == true" [ngValue] = "0"> Please Select</option> 
     <option *ngFor="let industry of industries" [ngValue]="industry.id">{{industry.name}} </option> 
</select> 
    </div> 
</form> 

Working Example