Angular 2: How to get the selected value from different options of a form?

Question

I would like to use a <select> in a form to let the user being able to update values among different <option>. I have used the technique from the guide here: https://angular.io/docs/ts/latest/guide/forms.html. Here is the sample I am talking about:

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

In my order-details.component I have got an updateOrder() which calls the updateOrder() from myApp.services.

My problem is when I am trying to send the data from the form to the back-end: all the parts with an <input> are OK, but not those with <select> (it returns the original values, and not the one selected).

Does anyone have encountered this or a similar problem? Thanks for your help!

Looks like a dup of http://stackoverflow.com/questions/34686855/angular2-access-a-select-event-change-within-the-component — Günter Zöchbauer, Jan 22 '16 at 15:33

score 24 · Accepted Answer · answered Jan 23 '16 at 19:19

There is a way to get the value from different options. check this 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;
  }

score 5 · Answer 2 · edited Sep 30 '17 at 03:04

5

Been tackling this problem for a few hours.

Checked in the (incomplete) documentation to find an item in the NgSelectOption page called "ngValue"

Not sure if this is the intended use but it seemed to work fine.

So instead of using

[value]="item"

Use:

[ngValue]="item"

Just use ngModel on the select and ngModelChange event if you want to do something when it changes.

edited Sep 30 '17 at 03:04

Luno Batista

33
4

answered Apr 09 '16 at 05:40

Jason

1,221
1
8
4

ngValue can refer to an object while value will refer to only a primitive value. For example if "item" in this case was an object, and the options label was `{{item.name}}` you could then do `` in this case this.selected would be an object. If you used just `[value]`, this.selected would be a string called '{object, object}' – Eddy Howard Mar 18 '19 at 15:36

score 1 · Answer 3 · answered Jan 22 '16 at 15:58

1

In fact I can't reproduce your problem. I created a plunkr with a very simple form with an input and a select. When I submit the form, I have actual values in the bound object. See this plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.

Feel free to tell me if I didn't correctly understand your problem.

Thierry

answered Jan 22 '16 at 15:58

Thierry Templier

198,364
44
396
360

Actually, it seems that you have reproduced my problem in your plunkr: when I try to submit your form, I am getting the correct value within the ``, but whatever the type I choose in the ` – Yannick Morel Jan 25 '16 at 10:14
Mubashir have solved my problem by now, but thanks for your time! – Yannick Morel Jan 25 '16 at 10:23

score 0 · Answer 4 · answered Jun 13 '19 at 12:16

If you have static, hard-coded values for the select tag like below:

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

You can do the following:

@ViewChild('quantity') quantity: ElementRef;

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

Angular 2: How to get the selected value from different options of a form?

4 Answers4

Linked