Search code examples
angulardrop-down-menuselectedvalueangular-reactive-forms

Angular 4 - find selected value in dropdown

I am using Angular 4 Reactive Forms to create a dropdown

<select id="city" formControlName="city" (change)="onCitySelect($event)" >
    <option *ngFor="let city of cities" [ngValue]="city" >
        {{ city }} 
    </option>
</select>

When a value is selected in the dropdown, I want to call a method and display the selected value.

Here is my code to do this

onCitySelect(event) {
    console.log(event.target.value);
}

I was expecting it to print the City name as shown in the dropdown. However, it seems it displays the index number as well. For instance,

2: London

Instead of just London which is actually shown in the dropdown.

How can I get the city name without the index?

Solution

  • Use [value] instead of [ngValue] if you have a string or number as option value and don't want to use [(ngModel)]="...".

    For object values you always should use [ngValue] though.