How to get dropdown list selected value in form element in angular2

Question

Below My code has one form with few inputs. I want get all the values on submit. Able to get all the element values using ngModel. How can I get select option selected value.

 <form #f="ngForm" (ngSubmit) = "saveData(f)">
  <fieldset>
   <legend>Your Details:</legend>
   <label>Name: <input type="text" name="name" size="30" maxlength="100" [(ngModel)] = "name"></label><br />
   <label>Email: <input type="email" name="email" size="30" maxlength="100" [(ngModel)] = "email"></label><br />
   <label>Password: <input type="password" name="password" size="30" maxlength="100" [(ngModel)] = "password"></label><br />
   <select>
     <option *ngFor = "let combo of combos" value={{combo}}>{{combo}}
     </option>
   </select>
 <input type="submit" value="Save"/>
</fieldset><br />
</form>

Manh Le · Accepted Answer · 2017-04-10 04:36:25Z

2

I think it should be [value]="combo"

<select #selCombo>
  <option *ngFor = "let combo of combos" [value]="combo">{{combo}}
  </option>
</select>

Then get selected value in HTML side (if you don't want to write in component)

<div>{{selCombo.value}}</div>

edited Apr 10, 2017 at 4:36

answered Apr 10, 2017 at 4:32

Manh Le

1,65016 silver badges27 bronze badges

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

1 Comment

raj m Over a year ago

I want selected answer on submit.. I am calling saveData method with #f form varaible

raj m · Accepted Answer · 2017-04-10 04:46:03Z

0

problem was not setting the name property.

<select [(ngModel)]="gender" name="gender">
   <option *ngFor = "let combo of combos" [value]=combo>{{combo}}
   </option>
</select>

answered Apr 10, 2017 at 4:46

raj m

2,0136 gold badges23 silver badges38 bronze badges

Comments

Sandip - Frontend Developer · Accepted Answer · 2017-04-10 04:58:01Z

0

Use [(ngModel)] to bind selected value with variable OR Model as below:

<select [(ngModel)]="model.combo">
 <option *ngFor = "let combo of combos" value={{combo}}>{{combo}}
 </option>
</select>

OR

let comboValue : any;

<select [(ngModel)]="comboValue">
 <option *ngFor = "let combo of combos" value={{combo}}>{{combo}}
 </option>
</select>

edited Apr 10, 2017 at 4:58

answered Apr 10, 2017 at 4:33

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

2 Comments

raj m Over a year ago

Cant I include it through form variable that is #f

Sandip - Frontend Developer Over a year ago

I think you not need #f, if we go with any event action then we can use it like focus event and other

Collectives™ on Stack Overflow

How to get dropdown list selected value in form element in angular2

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related