Angular2 formControl pour sélectionner plusieurs

Je suis en utilisant Sematinc-UI et Angular2 ReactiveFormsModule formulaire et je voudrais utiliser [formControl] pour sélectionner plusieurs.

Si j'utilise select il 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 sélectionner plusieurs, ça ne fonctionne pas:

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

J'obtiens cette erreur:

de base.umd.js:3462 EXCEPTION: Uncaught (promettre): Erreur: Erreur dans http://localhost:3000/app/components/category.component.js classe CategoryComponent - inline modèle:0:1701 causée par: des valeurs.la carte n'est pas une fonction

Quel pourrait être le problème?

Ce qui est dans category.component.js (et .ts) où il est dit que les valeurs.la carte n'est pas une fonction.?
Je n'ai pas values variable, ni dans .js fichier, ni dans .ts fichier.
Je suis la recherche le même problème. - Je construire le FormBuilder groupe et quand j'ajoute 'courseIds': [1,3,5] (où courseIds est une sélection multiple), il se plaint que "cette.validateur n'est pas une fonction". Si je passe dans 'courseIds': {value: [1,3,5]} - je obtenir "des valeurs.la carte n'est pas une fonction", parce que c'est maintenant passé l'ensemble de l'objet en tant que valeur plutôt que de la matrice. Comment êtes-vous censé passer plusieurs valeurs à la FormControl constructeur?

InformationsquelleAutor smartmouse | 2016-10-03

7

Je l'ai eu à travailler. L'astuce est de faire en sorte que la valeur est toujours un tableau, même lorsque 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 la FormControl assurez-vous que le vide valeur est un tableau vide, plutôt que de '' ou undefined.
```
this.control = new FormControl([]);
```
Je ne suis pas en utilisant la Sémantique de l'INTERFACE utilisateur, juste norme Angulaire 2
- Ce validatrion règle utilisez-vous? Ne pouvez pas le faire fonctionner.
- Je ne me souviens pas, mais mon exemple montre pas de règles de validation - avez-vous essayé avec aucun?
InformationsquelleAutor Daniel Crisp
1

De travail dans ionic2 et de formes réactives, j'ai été en mesure de valider une sélection multiple en utilisant le validateur "requis" seulement, minlength() ne fonctionne pas. Vous avez besoin de passer la valeur null pour le modèle si vous ne voulez pas passer la validation. Tableau vide passer le "requis" de validation. Un peu bizarre si vous me demandez.

InformationsquelleAutor Becario Senior

J'ai essayé de Daniel réponses à mes ionique projet & ça fonctionne. Voici un exemple si quelqu'un est à la recherche

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

et dans le HTML, l'utilisation du modèle comme ceci

<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: je suis en utilisant ce ionique sur les ions, mais je devine que ça va
travailler avec HTML ordinaire, sélectionnez( ) aussi.

InformationsquelleAutor Junaid

0

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 dans un tableau, puis la deuxième et les valeurs suivantes sont traitées comme des validateurs (d'où la première erreur dans mon commentaire ci-dessus). Pour passer un tableau qu'il a à être "encadré" (d'un objet), mais FormControl attend les "handicapés" de la propriété afin d'utiliser la propriété "valeur" en tant que valeur, donc à la fin le bon format a été 'courseIds': {value: [1,3,5], disabled: false}.

InformationsquelleAutor steverippl

Vous devez vous connecter pour publier un commentaire.