web-dev-qa-db-fra.com

Angular2 formControl pour select multiple

J'utilise Sematinc-UI et Angular2 ReactiveFormsModule form et je voudrais utiliser [formControl] pour select multiple.

Si j'utilise select cela fonctionne sans problèmes:

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

Si j'utilise select multiple cela ne fonctionne pas:

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

Je reçois cette erreur:

core.umd.js: 3462 EXCEPTION: Non capturé (promis): Erreur: Erreur dans http: // localhost: 3000/app/components/category.component.js class CategoryComponent - modèle en ligne: 0 : 1701 provoqué par: values.map n'est pas une fonction

Quel pourrait être le problème?

formsselectangularsemantic-ui
6
smartmouse

Je l'ai fait travailler. L'astuce consistait à s'assurer que la valeur est toujours un tableau, même si rien n'est sélectionné.

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

Lors de la création de FormControl, assurez-vous que la valeur blank est un tableau vide, plutôt que '' ou undefined.

this.control = new FormControl([]);

Je n'utilise pas l'interface utilisateur sémantique, mais simplement la norme Angular 2

7
Daniel Crisp

J'ai essayé les réponses de Daniel pour mon projet ionique et ça marche. Voici un échantillon si quelqu'un cherche

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

et dans votre modèle HTML utilisez-le comme ça

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

Note: J'utilise ceci dans ionic sur ion-select mais je suppose que cela fonctionnera aussi avec HTML select ().

1
Junaid

Travaillant dans les formes ionique2 et réactives, j'ai pu valider une sélection multiple en utilisant le validateur 'requis' uniquement, minlength () ne fonctionnait pas. Vous devez transmettre la valeur null au modèle si vous ne voulez pas passer la validation. Un tableau vide passera la validation "requise". Un peu bizarre si vous me demandez.

1
Becario Senior

En regardant les tests pour FormControl ( https://github.com/angular/angular/blob/master/modules/%40angular/forms/test/form_control_spec.ts ), il est clair que si vous passez un tableau, la deuxième valeur et les valeurs suivantes sont traitées comme des validateurs (d'où la première erreur dans mon commentaire ci-dessus). Pour passer dans un tableau, il doit être "encadré" (dans un objet), mais FormControl attend la propriété "disabled" pour pouvoir utiliser la propriété "value" comme valeur. Le format correct était donc 'courseIds': {value: [1,3,5], disabled: false}.

0
steverippl