Angular 2 - select binding

Question

I want to select in <select> an option which I defined in component. But when I want to print this in console I get undefined. My code:

component.html:

<div class="row">
    <div class="form-group col-md-6">
        <label>Select option:</label>
        <select class="form-control" [(ngModel)]="selectedOption">
            <option *ngFor="let item of options" [value]="item">{{ item.display }}</option>
        </select>
    </div>
</div>

<button type="button" (click)="showOption()">Show selected option</button>

component.ts:

selectedOption: any;

sortOptions = [
    {
        value: 'option1',
        display: 'First option'
    },
    {
        value: 'option2',
        display: 'Second option'
    }
];

showOption(): void {
    console.log(this.selectedOption.value);
}

When I try print console.log(this.selectedOption.value); I get "undefined" and when I try to print console.log(this.selectedOption) I get "[option Option]"

I don't know how to resole it.

Yordan Nikolov · Accepted Answer · 2017-07-04 21:14:28Z

1

Try with [ngValue] instead [value]:

<select [(ngModel)]="selectedOption">
   <option value=""></option>
   <option *ngFor="let item of options" [ngValue]="item">
     {{item.display}}
   </option>
</select>

answered Jul 4, 2017 at 21:14

Yordan Nikolov

2,67815 silver badges17 bronze badges

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

4 Comments

user Over a year ago

It works, thanks. What is a different between value and ngValue?

Yordan Nikolov Over a year ago

There's no documentation which explain in details ngValue, but if you want to use objects in option you have to do it via [ngValue] for the rest cases you can use [value]

artuska Over a year ago

And what if I use ReactiveFormsModule instead of FormsModule — so I have formControlName instead of the ngModel — what should I do to make Angular to select selectedOption? Now I have options array and selectedOption is one of this array items... but Angular is not making this option as selected :(

Yordan Nikolov Over a year ago

It stays the same just replace [(ngModel)] with formControlName and it should works.

willmaz · Accepted Answer · 2017-07-04 21:33:38Z

0

You can also use this :

 <select [(ngModel)]="selectedOption">
   <option value=""></option>
   <option *ngFor="let item of sortOptions" [value]="item.id">
     {{item.display}}
   </option>
</select>

[value] for string values and [ngValue] for all types

answered Jul 4, 2017 at 21:33

willmaz

2,4832 gold badges23 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular 2 - select binding

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related