Angular 2 RC4 - Select ngModel delayed update

Question

I'm trying to create a select control that will bind the value to an Object and on change I can get access to the selected object.

I know there has a been a lot of changes in the forms so not sure if this is a user error or bug or not possible.

Here is where I'm at so far: Link to Plunker

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

@Component({
    selector: 'my-app',
    template: `
       <h1>My First Angular 2 App</h1>
       <select (change)="onChange($event)" [(ngModel)]="selected">
          <option value=''></option>
          <option *ngFor="let d of data" [ngValue]="d">
             {{d.name}}
          </option>
       </select>
   `
})
export class AppComponent { 
  diagnostic;
  selected;
  data = [
     { id: 1 , name: 'query 1', filters: [
        { 'filter1': 'material = 1'},
        {'filter2': 'plant = 2'}
       ]
     },
     { id: 2 , name: 'query 2', filters: [
        { 'filter1': 'material = 1'},
        {'filter2': 'plant = 2'}
        ]
     }
  ];

   onChange(event) {
      console.log(event.target.value);
      console.log(this.selected);
  }
}

What I would like to have happen is that when the onChange event is called that either I pass the Object value of the selected item into that method or get access to the selected value through the property bound in ngModel.

//expected
onChange(event) {
  console.log(event.target.value) // selected object bound to ngValue
  console.log(this.selected) // ngModel updated to object bound to selected option 
}

But unfortunately, the event.target.value is a string version of the object and this.selected sort of works but is always behind on being updated.

Is there another way or proper way to handle this? Is the delay in the ngModel a bug?

Any help would be appreciated!

Answer 1

You should define select inputs/outputs as following:

<select [(ngModel)]="selected" (ngModelChange)="onChange()">
  <option *ngFor="let d of data" [ngValue]="d">
    {{d.name}}
  </option>
</select>

and then the model is correctly applied to the property. http://plnkr.co/edit/JGgflTY9LvrDDhqqlSGP?p=preview

Notice that the definition of ngModel and ngModelChange should be ordered as is in example :)