Angular2 ngModel select - handling an object

Question

I have the following construct:

 <select ngbDropDown class="form-control" id="disk1" required [(ngModel)]="disk1" name="resourceA">
     <option *ngFor="let r of disks" [value]="r">{{r.name}}</option>
 </select>

I want to pass the r object to the ngModel disk1, which is a property in my component:

disk1 = new Disk();

However if I try to access it after changing the select box I get undefined:

console.log("Disk1 id: " + this.disk1.id);

Any idea? Thanks!

Answer 1

You can use ngValue instead of the simple value binding to bind an object to the option element.

<select [(ngModel)]="model.selectedItem" name="selectItem">
    <option *ngFor="let item of items" [ngValue]="item">{{item.title}}</option>
</select>