0

I am trying a select a default value in the dropdown. Here the value is an object instead of a string. With a string, the below approach works fine. I am facing issues when I try with an object.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'awesome-component',
  template: `
    <select [(ngModel)]="selectedModule">
     <option *ngFor="let module of modules" [ngValue]="module">{{module.moduleName}}</option>
   </select>
  `
})
export class AwesomeComponent implements OnInit {

modules: any[];
selectedModule: any = null;

  ngOnInit(){
    this.loadModules();
  }

  loadModules(){
    //load you modules set selectedModule to the on with the
    //id of modInst.modID[0]._id you can either loop or use .filter to find it.
      this.modules = [];
      this.modules.push({moduleName:'Ford',_id:1});
      this.modules.push({moduleName:'Chevy',_id:2});
      this.modules.push({moduleName:'Honda',_id:3});
      this.modules.push({moduleName:'Toyota',_id:4});

      this.selectedModule = {moduleName:'Toyota',_id:4};
    }
}
Maclean Pinto
  • 1,075
  • 2
  • 17
  • 39
  • Bind to a property of the object like `[(ngModel)]="selectedModel.moduleName"`. – Aluan Haddad Apr 28 '17 at 10:57
  • In `loadModules()` you just need to use the objects from your collection `this.selectedModule = this.modules.find(module => module._id === 4)`. This `this.selectedModule = {moduleName:'Toyota',_id:4}` defines a new object that is not reference equal to any of the existing objects. – andreim Apr 28 '17 at 11:10
  • @AluanHaddad Tried [(ngModel)]="selectedModel.moduleName" . It does not bind. – Maclean Pinto Apr 28 '17 at 12:36
  • you also need to change the binding for `[ngValue]="module"` to `[ngValue]="module.moduleName"` accordingly. Of course you can also bind to `_id` – Aluan Haddad Apr 28 '17 at 12:38
  • @AluanHaddad I am looking to send the entire object on select. – Maclean Pinto Apr 28 '17 at 12:49
  • Nevermind, this already has any answer http://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2 – Aluan Haddad Apr 28 '17 at 12:51
  • Possible duplicate of [Binding select element to object in Angular 2](http://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2) – Aluan Haddad Apr 28 '17 at 12:51
  • @AluanHaddad This question is not related to setting objects on select. The problem stated here is that when an object is set to ngValue the default value is not getting selected based on the object passed – Maclean Pinto Apr 28 '17 at 13:52
  • But it says in that answer exactly why. It is unsatisfying, but true. It works for Objects only when they match referencially (point to the same Object). There should be support for setting a custom converter but otherwise it does not match existing objects. Basically, it just uses default JavaScript equality when what you want is structural equality. Bad API is bad. – Aluan Haddad Apr 28 '17 at 13:56

0 Answers0