wake-up-neo.com

Angular2 formControl für mehrere auswählen

Ich verwende Sematinc-UI und Angular2 ReactiveFormsModule, und ich möchte [formControl] für select multiple verwenden.

Wenn ich select verwende, funktioniert es ohne Probleme:

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

Wenn ich select multiple verwende, funktioniert es nicht:

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

Ich erhalte diesen Fehler:

core.umd.js: 3462 AUSNAHME: Nicht erfasst (im Versprechen): Fehler: Fehler in http: // localhost: 3000/app/components/category.component.js class CategoryComponent - Inline-Vorlage: 0 : 1701 verursacht durch: values.map ist keine Funktion

Was könnte das Problem sein?

6
smartmouse

Ich habe es zum Laufen gebracht. Der Trick bestand darin, sicherzustellen, dass der Wert immer ein Array ist, auch wenn nichts ausgewählt ist.

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

Stellen Sie beim Erstellen des FormControlsicher, dass der blank value ein leeres Array ist, und nicht '' oder undefinedname__.

this.control = new FormControl([]);

Ich verwende keine Semantic-UI, nur Standard Angular 2

7
Daniel Crisp

Ich habe Daniels Antworten für mein Ionenprojekt ausprobiert und es funktioniert. Hier ist ein Beispiel, wenn jemand sucht

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

und verwenden Sie es in Ihrer HTML-Vorlage so

<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>

Hinweis: Ich verwende dies in ionic on ion select, aber ich schätze, dass es auch mit regulärem HTML select () funktioniert.

1
Junaid

Da ich in ionic2 und reaktiven Formen arbeitete, konnte ich eine Mehrfachauswahl mit dem Validator 'required' nur validieren, minlength () funktionierte nicht. Sie müssen Null an das Modell übergeben, wenn Sie die Validierung nicht bestehen möchten. Ein leeres Array besteht die erforderliche Validierung. Ein bisschen komisch, wenn Sie mich fragen.

1
Becario Senior

Wenn Sie die Tests für FormControl ( https://github.com/angular/angular/blob/master/modules/%40angular/forms/test/form_control_spec.ts ) betrachten, ist es klar, dass Sie bei der Übergabe in einem Array dann angeben Der zweite und die nachfolgenden Werte werden als Validierer behandelt (daher der erste Fehler in meinem Kommentar oben). Um ein Array zu übergeben, muss es "boxed" (innerhalb eines Objekts) sein, aber FormControl erwartet die Eigenschaft "disabled", um die Eigenschaft "value" als Wert zu verwenden. Am Ende war also 'courseIds': {value: [1,3,5], disabled: false} das richtige Format.

0
steverippl