2016-11-19 20 views
2

選択した倍数でFormBuilderを正しくビルドするにはどうすればよいですか? これは複数ではなく動作します。角2 FormBuilder複数選択

私はFormArray、FormGroupNameをHTMLで使用しようとしましたが、すべてエラーを返しました。そして、私が遭遇する例は常にタグなし<select multiple>です。

私を導くことができますか?おかげさまで

.TS

this.detailFormGroup = this.fb.group({ 
    "id": [this.item.id], 
    "name": [this.item.name, [Validators.required]], 
    "categories": this.item.categories 
}); 

私は必要なもの.HTML

<form [formGroup]="detailFormGroup"> 
    <div> 
     <input type="text" formControlName="name" /> 
    </div> 
    <div> 
     <select formControlName="categories" multiple> 
     <option *ngFor="let item of categories" [value]="item.id">{{ item.categoryName }}</option> 
     </select> 
    </div> 
</form> 

は私がdetailFormGroup.valueを得るとき、私は、オブジェクトを受け取るということです。

{ 
    id: 1, 
    name: "name 1", 
    categories: [ 
     { 
      id: 5, 
      categoryName: "name 5" 
     }, 
     { 
      id: 10, 
      categoryName: "name 10" 
     } 
    ] 
} 

そしてもちろん、アイテムオブジェクトを設定すると、アイテムとともにHTMLコントロールも選択されます。

私はこのような間違った取得しています:

{ 
    id: 1, 
    name: "name 1", 
    categories: [ 5, 10 ] 
} 

答えて

3

選択した値の配列を取得しています。あなたのHTMLにはoption [value]="item.id"があります。

option [value]="item"に変更してください。

関連する問題