web-dev-qa-db-ja.com

複数を選択するためのAngular2formControl

Sematinc-UIとAngular2ReactiveFormsModuleフォームを使用しており、複数を選択するために[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は関数ではありません

何が問題なのですか？

formsselectangularsemantic-ui
7
smartmouse

私はそれを動かしました。秘訣は、何も選択されていない場合でも、値が常に配列であることを確認することでした。

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

FormControlを作成するときは、blank値が''またはundefinedではなく空の配列であることを確認してください。

this.control = new FormControl([]);

私はSemantic-UIを使用していません。標準のAngular 2

7
Daniel Crisp

私のionicプロジェクトでダニエルの答えを試しましたが、うまくいきました。誰かが探している場合のサンプルを次に示します。

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>

注：これはion-selectのionic）で使用していますが、通常のHTML select（）でも機能すると思います。

1
Junaid

Ionic2およびreactive形式で作業していたので、バリデーター「required」のみを使用して複数選択を検証できました。minlength（）は機能しませんでした。検証に合格しない場合は、モデルにnullを渡す必要があります。空の配列は「必須」の検証に合格します。あなたが私に尋ねると少し奇妙です。

1
Becario Senior

FormControlのテストを見ると（ https://github.com/angular/angular/blob/master/modules/%40angular/forms/test/form_control_spec.ts ）、合格した場合は明らかです配列の場合、2番目以降の値はバリデーターとして扱われます（したがって、上記のコメントの最初のエラー）。配列を渡すには、（オブジェクト内で）「ボックス化」する必要がありますが、FormControlは、「value」プロパティを値として使用するために「disabled」プロパティを想定しているため、最終的に正しい形式は'courseIds': {value: [1,3,5], disabled: false}。

0
steverippl