Select change event occurs before ngModel updates

[brtnshrdr]

I'm trying to get the updated select box value, which in this case is an object, when it changes. I'm trying to use the [ngValue]="object" syntax added in #7842 like so

<select [(ngModel)]="selectedObj" (change)="objChanged($event)">

<option *ngFor="#obj of searchResults" [ngValue]="obj">
    {{obj.name}}
</option>

</select>

The $event.target.value is a string equal to "1: Object" (The "1" is the index of the array I assume)
However, if in that same method I print out "selectedObj", it's always the old value. It seems as though the change event fires before the model is updated.

edit - If ngFor redraws the array of option values, the index keeps incrementing, so you can't use it to pull the correct object from the array ("searchResults" in this case)

Steps to reproduce and a minimal demo of the problem

http://plnkr.co/edit/7rIHLBWWVqpcPL1NrpDz?p=preview

What steps should we try in your demo to see the problem?

If you look at the console.log()'s, you'll notice that the "Selected Obj: " is always equal to the old value when you select a new value

Expected/desired behavior

I would like either the model object to be updated before the change event fires, or a way to access the new value from the $event obj passed into the change function.

[samridh90]

I have the same issue. I wanted to use the new value when the select option changed. Here's the workaround I used:
In the component class

private _selectedObj;
get selectedObj() {
    return this._selectedObj;
}
set selectedObj(newObj) {
    this._selectedObj = newObj;
    this.objChanged(newObj);
}

ngOnInit(): void {
    this._selectedObj = this.getDefaultValue();
}

In the template

<select [(ngModel)]="selectedObj">
<option *ngFor="#obj of searchResults" [ngValue]="obj">
    {{obj.name}}
</option>
</select>

[zoechi]

I think it's the same as #7822 and caused by #6311

[kleinech]

You can use (ngModelChange) instead of (change):

<select [(ngModel)]="selectedObj" (ngModelChange)="objChanged($event)">

<option *ngFor="#obj of searchResults" [ngValue]="obj">
    {{obj.name}}
</option>

</select>

[pkozlowski-opensource]

(ngModelChange) is the way to go

[pawantiwari1]

you can also used change method
In html file
<select [(ngModel)]="selectedObj" (change)="selectChangeHandler($event)">

{{obj.name}}

in ts file
selectChangeHandler(event:any)
{
this.selectedshift=event.target.value;
console.log("if change in method "+this.selectedshift)
}

[nsivaji61]

This code is not working prod mode. Any suggestion?

[mlc-mlapis]

@nsivaji61 ... it has to be ngModelChange as ... <input [ngModel]="username" (ngModelChange)="...">

[nsivaji61]

I want to fire onchange event when ever user selects anything because i have a cascading dropdown lists. Please suggest.

Thanks

[vishbal]

nsivaji61 : Were you able to resolve the issue ? I have same problem of updating cascading drop downs and (change)="somemethod()" is triggered without any user selection change.

[pawantiwari1]

You can build as ng build command then its work in my project

[ashfaq-unstoppable]

sample ngValue use

[ishwara-bhat]

this.selectedshift=event.target.value;

With angular 8, I saw that event.value works.
console.log(event) gives me-
MatSelectChange {source: MatSelect, value: "ffff"}

Best recomemndation is do console.log of the event object, if nothing is working. Then tune your code.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}