How to get selected option from select and assign it to select ngModel

Question

I have the following select menu:

<div class="medium-3 columns">
    <label>First Menu
        <select name="first-menu">
            <option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
        </select>
    </label>
</div>

I would assing a model to the select menu so i edited the code in the following way (i see it here):

<div class="medium-3 columns">
    <label>First menu
        <select [ngModel]="myForm.firstMenu" (ngModelChange)="onSelected($event)" name="first-menu">
            <option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
        </select>
    </label>
</div>

On ngModelChange it triggers the following method in the component:

onSelectedFirstMenu(e: any): void {
    myForm.firstMenu = e;
}

Since i have to add several menu, i would make code reuse so i do not want to create multiple methods like onSelectedSecondMenu, onSelectedThirdMenu and so on for every html menu. So i just want to use a different ngModel for every menu (myForm.secondMenu, myForm.thirdMenu and so on...) to get the selected option. Is it possible in Angular2?

score 3 · Accepted Answer · answered Sep 09 '16 at 10:31

I solved and there are 2 ways to get the same behaviour:

First way (preferred):

<div class="medium-3 columns">
    <label>First Menu
        <select [(ngModel)]="myForm.firstMenu" name="first-menu">
            <option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
        </select>
    </label>
</div>

Second way:

<div class="medium-3 columns">
    <label>First Menu
        <select [ngModel]="myForm.firstMenu" (ngModelChange)="myForm.firstMenu = $event" name="first-menu">
            <option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
        </select>
    </label>
</div>

More info here

Kesem David · Answer 2 · 2016-09-09T10:38:21.443

1

If i understand your question correctly, every single menu has a different purpose, therefore, trying to somehow combine the invoked method for all of those menus is incorrect.

Having a method for each of those <select>s is the right approach, each one of them should have its' own logic

Please let me know if i misunderstood

Use [(MyForm.firstMenu)] to bind the select to your firstMenu property

edited Sep 09 '16 at 10:38

answered Sep 09 '16 at 10:12

Kesem David

2,135
3
27
46

I just want that when users choose `A` option, the value `A` is assigned to `myForm.firstMenu`. If users choose `B` option from the second menu, the value `B` is assigned to `myForm.secondMenu` model. And so on for next menus... – smartmouse Sep 09 '16 at 10:18
@smartmouse please do mark the answer as accepted if you found it helpful, for the future lookers to come :) – Kesem David Sep 10 '16 at 21:17
Done, thank you for the reminder ;) I see now that someone downvote my answer :( – smartmouse Sep 12 '16 at 09:10

score 0 · Answer 3 · answered Sep 09 '16 at 10:08

0

Something like this should do depending on your concrete requirements:

<select [(ngModel)]="myForm.firstMenu"

constructor() {
  this.myForm.firstMenu = items[0];
}

answered Sep 09 '16 at 10:08

Günter Zöchbauer

623,577
216
2,003
1,567

How to get selected option from select and assign it to select ngModel

3 Answers3

Linked