带有选择多个的Angular 2 FormBuilder答案

【问题标题】：Angular 2 FormBuilder with Select multiple带有选择多个的Angular 2 FormBuilder
【发布时间】：2016-11-19 21:14:46
【问题描述】：

如何在选择多个上正确构建 FormBuilder？它只能在没有多个的情况下工作。

我尝试在 HTML 中使用 FormArray、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"
        }
    ]
}

当然，当我设置 item 对象时，HTML 控件也会与它们的项目一起被选中。

我错了：

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

【问题讨论】：

标签： angular formbuilder

【解决方案1】：

您将获得一组选定值。在您的 HTML 中，我们可以看到 option [value]="item.id"。

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

【讨论】：