2016-10-03 4 views
3

Ich verwende Sematinc-UI und Angular2 ReactiveFormsModule Formular und ich möchte [formControl] für wählen mehrere verwenden.Angular2 formControl für wählen mehrere

Wenn ich select verwenden 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 mehrere verwenden wählen es nicht funktioniert:

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

ich diesen Fehler:

Kern .umd.js: 3462 EXCEPTION: Uncaught (in Versprechen): Fehler: Fehler in http://localhost:3000/app/components/category.component.js Klasse CategoryComponent - Inline-Vorlage: 0: 1701 verursacht durch: values.map ist kein a Funktion

Was könnte das Problem sein?

+0

Was ist in 'category.component.js' (und' .ts') wo es heißt, dass values.map keine Funktion ist? –

+0

Ich habe keine 'values' Variable weder in' .js' Datei noch in '.ts' Datei. – smartmouse

+0

Ich finde das gleiche Problem. Ich baue die FormBuilder-Gruppe und wenn ich ''courseIds' hinzufügen: [1,3,5]' (wo courseIds eine Mehrfachauswahl ist) beschwert es sich, dass "this.validator ist keine Funktion". Wenn ich "courseIds" übergebe: {value: [1,3,5]} "Ich bekomme" values.map ist keine Funktion ", weil jetzt das ganze Objekt als Wert und nicht als Array übergeben wurde. Wie sollen Sie mehrere Werte an den FormControl-Konstruktor übergeben? – steverippl

Antwort

0

Mit Blick auf die Tests für FormControl (https://github.com/angular/angular/blob/master/modules/%40angular/forms/test/form_control_spec.ts) ist klar, dass wenn Sie ein Array übergeben, die zweiten und nachfolgenden Werte als Validatoren behandelt werden (daher der erste Fehler in meinem Kommentar oben). Um ein Array zu übergeben, muss es "eingerahmt" werden (innerhalb eines Objekts), aber FormControl erwartet die Eigenschaft "disabled", um die Eigenschaft "value" als Wert zu verwenden. Am Ende war das richtige Format 'courseIds': {value: [1,3,5], disabled: false}.

5

Ich habe es funktioniert. 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> 

Beim Erstellen der FormControl der leer Wert stellen Sie sicher, ein leeres Array, anstatt '' oder undefined.

this.control = new FormControl([]); 

Ich bin nicht Semantic-UI, nur Standard Angular 2

+0

Welche Validatron-Regel verwenden Sie? Kann es nicht funktionieren lassen. –

+0

Ich erinnere mich nicht, aber mein Beispiel zeigt keine Validierungsregeln - haben Sie es mit keinem versucht? –

1

Arbeiten in ionic2 und reaktive Formen verwendet wird, konnte ich ein mehrfach validieren wählen Sie den Validator 'erforderlich' nur mit, minlength() funktioniert nicht. Sie müssen NULL an das Modell übergeben, wenn Sie die Validierung nicht bestehen möchten. Leeres Array wird die 'erforderliche' Validierung bestehen. Ein bisschen komisch wenn du mich fragst.