web-dev-qa-db-fra.com

Angular 2: Comment obtenir la valeur sélectionnée à partir des différentes options d'un formulaire?

Je souhaite utiliser un <select> dans un formulaire permettant à l'utilisateur de pouvoir mettre à jour les valeurs entre différents <option>. J'ai utilisé la technique du guide ici: https://angular.io/docs/ts/latest/guide/forms.html . Voici l'exemple dont je parle:

<div class="form-group">
    <label for="type">Type :</label>
    <select class="form-control" [(ngModel)]="order.type" ngControl="type">
        <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>
</div>

Dans ma commande-details.component, j'ai un updateOrder () qui appelle le updateOrder () de myApp.services.

Mon problème est lorsque j'essaie d'envoyer les données du formulaire vers le back-end: toutes les parties avec un <input> sont OK, mais pas ceux avec <select> (il renvoie les valeurs d'origine et non celle sélectionnée).

Quelqu'un a-t-il rencontré ce problème ou un problème similaire? Merci de votre aide!

formshtml-selectangularangular-ngmodelangular2-forms
11
Yannick Morel

Il existe un moyen d'obtenir la valeur de différentes options. vérifier cela plunker

component.html

 <select class="form-control" #t (change)="callType(t.value)">
      <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>

component.ts

this.types = [ 'type1', 'type2', 'type3' ];
   this.order = {
      type: 'type1'          
  };  

  callType(value){
    console.log(value);
    this.order.type=value;
  }
22
Mubashir

J'attaque ce problème depuis quelques heures.

Vérifié dans la documentation (incomplète) pour trouver un élément dans la page NgSelectOption appelée "ngValue"

Je ne sais pas si c'est l'utilisation prévue, mais cela semblait bien fonctionner.

Donc, au lieu d'utiliser

[value]="item"

Utilisation:

[ngValue]="item"

Utilisez simplement ngModel sur l'événement select et ngModelChange si vous voulez faire quelque chose quand il change.

4
Jason

En fait, je ne peux pas reproduire votre problème. J'ai créé un plunkr avec une forme très simple avec un input et un select. Lorsque je soumets le formulaire, j'ai des valeurs réelles dans l'objet lié. Voir ce plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview .

N'hésitez pas à me dire si je n'ai pas bien compris votre problème.

Thierry

1
Thierry Templier

Si vous avez des valeurs statiques et codées en dur pour la balise select comme ci-dessous:

<select #quantity>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
  <option value="five">5</option>
</select>

Vous pouvez effectuer les opérations suivantes:

@ViewChild('quantity') quantity: ElementRef;

console.log(this.quantity.nativeElement.value);  // will print value of the currently selected option
0
Anand Kumar