CODEWITHSUNDEEP
angulardrop-down-menuselectedvalueangular-reactive-forms
swati
swati

Reputation: 1267

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?

Upvotes: 2

Views: 16507

Answers (4)

foo-baar
foo-baar

Reputation: 1104

Simplest solution :

<select (change)="methodToCall($event.target.value)">
                            <option value="" selected>Please select account</option>
                            <option *ngFor='let details of someInformation?.thatIhave'
                                value={{details?.hNum}}>{{details?.hNum}}</option>
                        </select>

Upvotes: 0

Ankit Raonka
Ankit Raonka

Reputation: 6849

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

Upvotes: 0

HDJEMAI
HDJEMAI

Reputation: 9800

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.

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657238

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.

Upvotes: 7

Related Questions