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.map不是函数< /强>

可能是什么问题？

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

使用ionic2和反应形式，我能够使用验证器'required'验证多重选择，minlength（）不起作用。如果不想传递验证，则需要将null传递给模型。空数组将通过“必需”验证。如果你问我，有点奇怪。

Answer 3

我尝试了Daniel的离子项目的答案，并且该方法有效。这是一个样本，如果有人在找

buildForm() {
    this.registerForm = this.formBuilder.group({
      'contact': ['03007654321', [Validators.required]],
      'agree': [true, Validators.requiredTrue],
      'categories': this.formBuilder.array([]),
      'locations': [[], Validators.required],
    });
  }

，然后在您的HTML模板中像这样使用它

<ion-item  >
      <ion-label>Gender</ion-label>
      <ion-select multiple="true" [formControl]="registerForm.controls.locations">
        <ion-option value="f">Female</ion-option>
        <ion-option value="m">Male</ion-option>
      </ion-select>
    </ion-item>

注意：我在离子选择离子显示器上使用它，但是我猜它会也可以使用常规HTML select（）。

Answer 4

查看FormControl（https://github.com/angular/angular/blob/master/modules/%40angular/forms/test/form_control_spec.ts）的测试，很清楚，如果传入一个数组，那么第二个和后续值将被视为验证器（因此我上面评论中的第一个错误）。要传入一个数组，它必须是＃34;盒装＆＃34; （在一个对象中），但FormControl期望＆＃34;禁用＆＃34;财产以使用＆＃34;值＆＃34; property作为值，所以最后正确的格式为'courseIds': {value: [1,3,5], disabled: false}。

Angular2 formControl用于选择多个

4 个答案: