web-dev-qa-db-ja.com

Angular 2：フォームのさまざまなオプションから選択した値を取得する方法は？

フォームで<select>を使用して、ユーザーがさまざまな<option>の間で値を更新できるようにします。ここのガイドのテクニックを使用しました： https://angular.io/docs/ts/latest/guide/forms.html 。私が話しているサンプルは次のとおりです。

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

私のorder-details.componentには、myApp.servicesからupdateOrder（）を呼び出すupdateOrder（）があります。

私の問題は、フォームからバックエンドにデータを送信しようとするときです。<input>のある部分はすべて問題ありませんが、<select>のある部分は問題ありません（元の値を返し、選択した部分は返しません）。

誰もこれまたは同様の問題に遭遇しましたか？ご協力いただきありがとうございます！

formshtml-selectangularangular-ngmodelangular2-forms
11
Yannick Morel

さまざまなオプションから値を取得する方法があります。これを確認してください 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

この問題に数時間取り組んでいます。

（不完全な）ドキュメントをチェックして、「ngValue」という名前の NgSelectOption ページでアイテムを見つけました。

これが意図した用途であるかどうかはわかりませんが、うまくいくようです。

そのため、代わりに

[value]="item"

つかいます：

[ngValue]="item"

変更時に何かを実行したい場合は、selectおよびngModelChangeイベントでngModelを使用します。

4
Jason

実際、問題を再現することはできません。 inputとselectを持つ非常にシンプルなフォームでplunkrを作成しました。フォームを送信すると、バインドされたオブジェクトに実際の値があります。このplunkrを参照してください： https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview 。

問題を正しく理解できなかった場合は、お気軽にご連絡ください。

ティエリー

1
Thierry Templier

次のように、選択タグに静的なハードコードされた値がある場合：

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

次のことができます。

@ViewChild('quantity') quantity: ElementRef;

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