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:

Here's a plunker: http://plnkr.co/edit/hwF2U7WHp1U8IQnVGEXv?p=preview

Am I missing something or is this a bug?

Answer 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.

Plunker example