i'm trying create select control bind value object , on change can access selected object.
i know there has been lot of changes in forms not sure if user error or bug or not possible.
here i'm @ far: link plunker
import { component } '@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 have happen when onchange event called either pass object value of selected item method or access selected value through property bound in ngmodel.
//expected onchange(event) { console.log(event.target.value) // selected object bound ngvalue console.log(this.selected) // ngmodel updated object bound selected option }
but unfortunately, event.target.value
string version of object , this.selected
sort of works behind on being updated.
is there way or proper way handle this? delay in ngmodel bug?
any appreciated!
you should define select inputs/outputs following:
<select [(ngmodel)]="selected" (ngmodelchange)="onchange()"> <option *ngfor="let d of data" [ngvalue]="d"> {{d.name}} </option> </select>
and model correctly applied property. http://plnkr.co/edit/jggflty9lvrddhqqlsgp?p=preview
notice definition of ngmodel , ngmodelchange should ordered in example :)
Comments
Post a Comment