Select Item Always Returns [object, Object]

Question

I'm trying to get a simple form working in angular. It has a select box, setup like this:

<select formControlName="tag1" (ngModelChange)="changeTag1($event)">
    <option *ngFor="let up of uploadMock" [ngValue]="up" [value]="up.tagCode">{{up.tagName}}</option>
  </select>

I want to get it's value when it posts back. But, the value is always [object, Object], even when I inspect it using Chrome.

What am I doing wrong? I can't understand why it's so difficult to get the value of a select box.

Answer 1

Try like this:

Working Demo

.html

<select formControlName="tag1" (change)="changeTag1($event.target.value)">
    <option *ngFor="let up of uploadMock" [value]="up.tagCode">{{up.tagName}}</option>
</select>

.ts

  changeTag1(evt) {
    console.log(evt)
  }

Answer 2

You are doing correct but you need to remove ngValue, you can use value in this way:

<option *ngFor="let order of orders; let i = index" [value]="orders[i].id">

within the select HTML tag.