Angular2 formControl用于选择多个

Posted 2023-03-11

【中文标题】Angular2 formControl用于选择多个

【英文标题】：Angular2 formControl for select multiple

【发布时间】：2017-02-11 14:24:21

【问题描述】：

我正在使用 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="" class="ui fluid dropdown" [formControl]="myForm.controls.category">
            <option *ngFor="let item of categories" value="item">item</option>
        </select>

我收到此错误：

core.umd.js:3462 例外：未捕获（在承诺中）：错误：http://localhost:3000/app/components/category.component.js 类 CategoryComponent 中的错误 - 内联模板：0:1701 导致：values.map 不是函数

可能是什么问题？

【问题讨论】：

category.component.js（和.ts）中说 values.map 不是函数的地方是什么？

我没有values 变量，也没有在.js 文件中，也没有在.ts 文件中。

我发现了同样的问题。我构建了 FormBuilder 组，当我添加 'courseIds': [1,3,5] （其中 courseIds 是多选）时，它抱怨“this.validator 不是函数”。如果我传入'courseIds': value: [1,3,5]，我会得到“values.map 不是函数”，因为它现在已将整个对象作为值而不是数组传递。您应该如何将多个值传递给 FormControl 构造函数？

【参考方案1】：

我为我的 ionic 项目尝试了 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>

注意：我在 ionic on ion-select 中使用它，但我猜它会 也可以使用常规 HTML select()。

【参考方案2】：

在 ionic2 和反应形式中工作，我能够仅使用验证器“必需”来验证多项选择，minlength() 不起作用。如果您不想通过验证，则需要将 null 传递给模型。空数组将通过“必需”验证。如果你问我有点奇怪。

【参考方案3】：

我让它工作了。诀窍是确保该值始终是一个数组，即使没有选择任何内容。

<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

【讨论】：

您使用什么验证规则？不能让它工作。

我不记得了，但我的示例没有显示验证规则 - 你尝试过没有验证规则吗？

【参考方案4】：

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