Angular 4 - find selected value in dropdown

Question

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?

Answer 1

You can subscribe to formControl to fire a function on change of value and hence eliminating this

(change)="onCitySelect($event)" 

You can do this

this.myForm.get('city').valueChanges.subscribe(value=>{
     console.log(value);
})

where 'myForm' is your formGroup which has formControl 'city' so whenever you select value console.log() will happen hence no need to add onChange event

also instead of [ngValue] you can directly give [value] and what ever value you define here will get logged on change

Answer 2

Since you are using Angular 4 Reactive Forms, you can do as follows:

let say you have this declaration in your typescript file for your component:

export class myComponent{
    myForm: FormGroup;

    ngOnInit(){
        this.myForm = new FormGroup({
            city: new FormControl('', Validators.required)
        }
    }

    onCitySelect($event:any){
        console.log(this.myForm.controls["city"].value);
    }
}

So you can use: this.myForm.controls["city"].value to access the selected value for city.

Answer 3

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.