Angular - select placeholder not showing

Question

is there any reason why this simple code won't work? I'm trying to have a placeholder on my select, but it simply shows as one of the other options in the list.

<div *ngFor="let d of formDatiRichiesta" class="form-row">
          <select *ngIf="d.type=='select'" 
                  class="form-control" 
                  name="{{d.name}}" 
                  [(ngModel)]="model[d.name]"
                  required>
            <option selected disabled>{{d.placeholder}}</option>
            <option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.denominazione}}</option>
          </select>
        </div>

I'm using angular4. Thanks.

--EDIT-- I found out that if I delete [(ngModel)]="model[d.name]" all works fine. Any hint?

Answer 1

You have to set the value of the <option> to the value of the model, because the <select> will use the value of the model as the default selection.

When the model is undefined at the beginning you can do it like this:

<option value="undefined">Please choose...</option>

Answer 2

That's how it is supposed to work. With the attributedisabled you can't choose it as an option.

But you could add the hidden attribute to also hide it:

<option value="" selected disabled hidden>{{d.placeholder}}</option>