Angular 2 Forms: binding html select to collection of objects

Question

I would like to display a collection of selectable objects in an angular 2 application (RC 5, forms 0.3.0)

<select [(ngModel)]="selectedItem">       
  <option *ngFor="let item of selectableItems"
          [value]="item">
    {{ item }}
  </option>
</select>

<div> {{ selectedItem }} </div>

The list itself is correctly displayed.

But all that is displayed for 'selectedItem' is [object Object]. When accessing the item in code, I get the corresponding string "[object Object]". I tried switching to ngValue but that produces the same results.

The whole thing works when I use primitive values instead of objects. But I suspect that I am missing some crucial point here.

Thanks for your help. I've been wasting several hours on Internet search and trial and error. Maybe somebody has encountered the same problem.

Edit (24-08-16): I came across this tutorial which explains how to create common forms widgets today. Maybe it's useful for somebody who lands on this page: https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

Ben Richards · Accepted Answer · 2016-08-22 20:20:19Z

11

From your code and explanation, I assume "item" is a complex object, and not a simple object. So to display it in HTML you would use:

<div> {{ selectedItem | json }} </div>

In code you have to access the "item" properties (as in item.value or whatever the item's properties are. If you want to work with simple values you can do something like this:

<select [(ngModel)]="selectedItem">       
  <option *ngFor="let item of selectableItems"
          [value]="item.id">
    {{ item }}
  </option>
</select>

This is of course assuming item is a complex type.

Edit

After some digging (because this has plagued me as well), I found the solution I really wanted! To use complex object you just need to use [ngValue] when binding the value! The fix is described at https://github.com/angular/angular/issues/4843. So the above will look like this:

<select [(ngModel)]="selectedItem">       
     <option *ngFor="let item of selectableItems"
             [ngValue]="item">
             {{item}}
     </option>
</select>

And then selectedItem will the the correct item from the list, including all it's properties.

edited Aug 22, 2016 at 20:20

answered Aug 22, 2016 at 15:54

Ben Richards

3,5861 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Brem Over a year ago

Thank you for taking the time to investigate my problem! I was able to fix it by reinstalling all my npm packages and then applying your solution.

passerby Over a year ago

The binding works well, but I don't succeed setting the selected item with [selected]="item.id === selectedItem.id". Any suggestions?

Ben Richards Over a year ago

Using the "ngValue" sets the selected item if you are using a complex object. You don't need to set "selected" explicitly.

Mateen Kadwaikar Over a year ago

How to bind complex object back to the view.

Collectives™ on Stack Overflow

Angular 2 Forms: binding html select to collection of objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related