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> (он возвращает исходные значения, а не тот, который выбран).

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

Ответы

Ответ 1

Существует способ получить значение из разных параметров. проверьте этот 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;
  }

Ответ 2

Решил эту проблему в течение нескольких часов.

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

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

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

[value]="item"

Использование:

[ngValue]="item"

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

Ответ 3

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

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

Тьерри

Ответ 4

Если у вас есть статические, жестко запрограммированные значения для тега 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