Why ngModel adds a blank/empty option to a select?

Question

I use the name attribute and the ngModel directive as an easy way to get form values in an Angular 2 app:

<input type="text" name="firstName" ngModel>

But I'm having a problem when using this approach in a select:

<select name="gender" ngModel>

The select with a ngModel renders with a blank/empty option.

Without ngModel:

With ngModel:

Am I missing something or is this a bug?

That's not an empty option added, just the default value not matching any option. What do you add `ngModel` for anyway? — Günter Zöchbauer, Sep 12 '16 at 09:12
With NgModel, its empty because its bind to your model value. if you want any gender to be selected by default then set the gender value to your model. e,.g. [(ngModel)]="Model.value" two way binding. — Jeet, Sep 12 '16 at 09:13
Possible duplicate of [Why does angularjs include an empty option in select](http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select) — Tjaart van der Walt, Sep 12 '16 at 09:13

score 1 · Accepted Answer · answered Sep 12 '16 at 09:15

1

If you use

<select name="gender" [(ngModel)]="gender">

with

gender: string = 'male';

You get the desired result. If you use ngModel this way, you also shouldn't need the getFormData method.

answered Sep 12 '16 at 09:15

1 Answers1