Angular4 - Getting "undefined" instead of dropdown selected value

Question

First I should say I went through all answered which posted for similar problem, but none of them worked for me! it's really odd, since the code it seems OK, but still it always give me undefined in change event!

I tried this :

<select name="countries" id="countries" [(ngModel)]="selectedCountry" (change)="onCountryChange()">                            
    <option *ngFor="let x of countries" [ngValue]="x">{{x.CouName}}</option>
</select>

and in my component

 selectedCountry: any[];

 onCountryChange() {  
    console.log(this.selectedCountry);//Give me undefined      
}

Also I tried this :

<select name="countries" id="countries" (change)="onCountryChange($event.target.value)">                            
    <option *ngFor="let x of countries" [ngValue]="x">{{x.CouName}}</option>
</select>

this one also give me undefined

onCountryChange(value) {  
    console.log(value);//Give me undefined      
}

Günter Zöchbauer · Accepted Answer · 2017-10-06 08:22:40Z

3

Use

(ngModelChange)="onCountryChange($event)"

instead of

(change)="onCountryChange()"

(change) is fired before the [(ngModel)]="..." binding was updated.

edited Oct 6, 2017 at 8:22

answered Oct 6, 2017 at 8:15

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Emad Dehnavi Over a year ago

I just used ngModelChange as you suggested, but still getting undefined!

Günter Zöchbauer Over a year ago

Hard to tell without seeing the code. Ideally you could provide a reproduction using stackblitz.com or Plunker. I added the $event parameter.

Emad Dehnavi Over a year ago

it's really weird! I reproduced in stackblitz and it's working fine, the same code! but in my project getting undefined! even the $event parameter is undefined! stackblitz.com/edit/angular-z7yniz

Günter Zöchbauer Over a year ago

Interesting. One observation. selectedCountry should be an object (country) not an array. Otherwise I have no idea.

Emad Dehnavi Over a year ago

I changed selectedCountry: any[]; to selectedCountry: Number; and change the ngValue to x.CouId which is a number, now I get the value, Thank you for the answer.

Sajeetharan · Accepted Answer · 2017-10-06 08:21:12Z

3

This is a known issue with angular.

Select change event occurs before ngModel updates

You should change from (change) to (ngModelChange)

<select name="countries" id="countries" [(ngModel)]="selectedCountry" (ngModelChange)="onCountryChange(selectedObj)">                            
    <option *ngFor="let x of countries" [ngValue]="x">{{x.CouName}}</option>
</select>

DEMO

answered Oct 6, 2017 at 8:21

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Angular4 - Getting "undefined" instead of dropdown selected value

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related