带有选择多个的 Angular 2 FormBuilder

Question

如何在选择的多个上正确构建 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 控件也与它们的 item 一起被选中。

我的错误是这样的:

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

Answer 1

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

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