Angular2 formControl用于选择多个

Question

我正在使用Sematinc-UI和Angular2 ReactiveFormsModule表单,我想[formControl]用于选择多个.

如果我使用select它没有问题:

        <select class="ui fluid dropdown" [formControl]="myForm.controls.category">
            <option *ngFor="let item of categories" value="{{item}}">{{item}}</option>
        </select>

如果我使用select multiple它不起作用:

        <select multiple="" class="ui fluid dropdown" [formControl]="myForm.controls.category">
            <option *ngFor="let item of categories" value="{{item}}">{{item}}</option>
        </select>

我收到此错误:

core.umd.js:3462 EXCEPTION:未捕获(在承诺中):错误:http:// localhost:3000/app/components/category.component.js中的错误类CategoryComponent - 内联模板:0:1701由:: values引起.地图不是一个功能

可能是什么问题呢？

Answer 1

我搞定了.诀窍是确保值始终是一个数组,即使没有选择任何内容也是如此.

<select multiple class="ui fluid dropdown" [formControl]="myForm.controls.category">
    <option *ngFor="let item of categories" [ngValue]="item">{{item}}</option>
</select>

在创建时FormControl确保空白值是空数组,而不是''或undefined.

this.control = new FormControl([]);

我没有使用Semantic-UI,只是标准的Angular 2

Answer 2

查看 FormControl 的测试（https://github.com/angular/angular/blob/master/modules/%40angular/forms/test/form_control_spec.ts），很明显，如果您传入一个数组，则第二个及后续数组值被视为验证器（因此是我上面评论中的第一个错误）。要传入数组，它必须被“装箱”（在对象内），但 FormControl 需要“disabled”属性才能使用“value”属性作为值，因此最终正确的格式是'courseIds': {value: [1,3,5], disabled: false}.