CODEWITHSUNDEEP
angularangular2-forms
nehemia
nehemia

Reputation: 237

Angular2 ngModel select - handling an object

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!

Upvotes: 3

Views: 5420

Answers (3)

Matias
Matias

Reputation: 31

This worked for me. Hope it helps:

<select [(ngModel)]="disk1" required>
     <option *ngFor="let r of disks" [value]="r">{{r.name}}</option>
</select>

Upvotes: 0

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10824

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>

Upvotes: 2

damianfabian
damianfabian

Reputation: 1681

You could use functions on click for the option and assign the selected with a function in your component, like this:

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

in your component you should have something like this:

.Class({
   constructor: function() {},
   selected: function(element){
     this.disk1 = { name:"MyDisk", content: element.content, id: element.id };
   }
})

Upvotes: 0

Related Questions