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 у меня есть updateOrder(), который вызывает updateOrder() из myApp.services.

Моя проблема заключается в том, что когда я пытаюсь отправить данные из формы в серверную часть: все части с <input> в порядке, но не с <select> (он возвращает исходные значения, а не выбранный).

Кто-нибудь сталкивался с этой или похожей проблемой? Спасибо за вашу помощь!


angular forms angular2-forms html-select angular-ngmodel
person Yannick Morel    schedule 22.01.2016    source источник
comment
Похоже на дубликат stackoverflow.com/questions/34686855/   -  person Günter Zöchbauer    schedule 22.01.2016

Ответы (4)


arrow_upward
25
arrow_downward

Есть способ получить значение из разных опций. проверьте этот плункер

компонент.html

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

компонент.ts

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

  callType(value){
    console.log(value);
    this.order.type=value;
  }
person Mubashir    schedule 23.01.2016

arrow_upward
5
arrow_downward

Несколько часов решал эту проблему.

Проверено в (неполной) документации, чтобы найти элемент на странице NgSelectOption под названием "ngValue"

Не уверен, что это предполагаемое использование, но, похоже, оно работало нормально.

Поэтому вместо использования

[value]="item"

Использовать:

[ngValue]="item"

Просто используйте ngModel для события select и ngModelChange, если вы хотите что-то сделать, когда оно изменится.

person Jason    schedule 09.04.2016
comment
ngValue может ссылаться на объект, тогда как value будет ссылаться только на примитивное значение. Например, если элемент в этом случае был объектом, а метка параметров была {{item.name}}, вы могли бы сделать <select size="10" [(ngModel)]="this.selected"> <option *ngFor="let item of items" [ngValue]="item">{{item.Name}}</option> </select>, в этом случае this.selected будет объектом. Если бы вы использовали только [value], this.selected был бы строкой с именем '{object, object}' - person Eddy Howard; 18.03.2019

arrow_upward
1
arrow_downward

На самом деле я не могу воспроизвести вашу проблему. Я создал plunkr с очень простой формой с input и select. Когда я отправляю форму, у меня есть фактические значения в связанном объекте. См. этот планкр: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview .

Не стесняйтесь сказать мне, если я не правильно понял вашу проблему.

Тьерри

person Thierry Templier    schedule 22.01.2016
comment
На самом деле, кажется, вы воспроизвели мою проблему в своем plunkr: когда я пытаюсь отправить вашу форму, я получаю правильное значение в <input>, но какой бы тип я ни выбрал в <select>, журнал консоли говорит type1. Разве у вас нет такого же поведения? Кстати, спасибо за время, которое вы потратили, чтобы воспроизвести проблему :) - person Yannick Morel; 25.01.2016
comment
Мубашир уже решил мою проблему, но спасибо за ваше время! - person Yannick Morel; 25.01.2016

arrow_upward
0
arrow_downward

Если у вас есть статические, жестко закодированные значения для тега select, как показано ниже:

<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
person Anand Kumar    schedule 13.06.2019