Angular 2 using select option preserve values of object selected

Question

Each plant has a plantid, plantname, role. I'm trying to get the entirety of the object back from the option selection.

   onChange(newValue){
      console.log(newValue)
      this.selectedPlant = newValue
    }

<select 
  *ngIf="plants" 
  class="form-control" 
  style="width:auto;" 
  #sel
  [(ngModel)]="selectedPlant"
  (ngModelChange)="onChange($event)"
  >
  <option 
   *ngFor="#plant of plants"
   [value]="plant.plantid"
   >{{plant.plantname}}</option>
</select>

If I set [value] = "plant", I get "[Object, Object]". I'm going to write a service to get one value from the other, but I feel like there should be a cleaner way to do this.

Günter Zöchbauer · Answer 1 · 2016-05-02T09:41:58.273

3

If you want to use objects as values instead of plain strings you have to use [ngValue] instead of [value]:

<select 
    *ngIf="plants" 
    class="form-control" 
    style="width:auto;" 
    #sel
    [(ngModel)]="selectedPlant"
    (ngModelChange)="onChange($event)">
  <option 
      *ngFor="let plant of plants"
      [ngValue]="plant">{{plant.plantname}}
  </option>
</select>

edited May 02 '16 at 09:41

answered Apr 23 '16 at 08:36

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Apr 22 '16 at 19:42

If you want the whole plant object, without changing much of your code you can do this-

onChange(plantid){
  console.log(plantid)
  this.selectedPlant = this.plants.filter((plant)=>{ return plant.plantid=== plantid;});
}

And in your html -

<select *ngIf="plants" class="form-control" style="width:auto;" #sel (ngModel)]="selectedPlant" (ngModelChange)="onChange($event.target.value)"> 
<option *ngFor="#plant of plants" [value]="plant.plantid">{{plant.plantname}}</option>

Hope that helps.

Angular 2 using select option preserve values of object selected

2 Answers2