带选择倍数的Angular 2 FormBuilder

问题描述：

如何在选定倍数上正确构建FormBuilder？它只能工作，没有多个。带选择倍数的Angular 2 FormBuilder

我尝试使用FormArray，HTML中的FormGroupName，但是，所有返回错误。我遇到的例子总是没有标记<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 ] 
}

答

你得到选择值的数组。在你的HTML中，我们可以看到option [value]="item.id"。

只需将其更改为option [value]="item"即可。

带选择倍数的Angular 2 FormBuilder

相关推荐