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?

When you don't assign value to option, then it'll be assigned value which is the same as text, also `ngModel` will clear the selected property if your option's value doesn't match with `ngModel`. — Pengyy, Aug 23 '17 at 09:06
see https://stackoverflow.com/questions/44044746/selected-of-select-doesnt-work-as-excepted-in-angular2/44151189#44151189 — Pengyy, Aug 23 '17 at 09:17

score 7 · Answer 1 · answered Jun 11 '18 at 10:48

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>

score 4 · Answer 2 · answered Aug 23 '17 at 09:03

4

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>

answered Aug 23 '17 at 09:03

Christian

22,585
9
80
106

score 4 · Answer 3 · answered Jun 15 '21 at 11:37

 <select formControlName="value"  class="form-control"
                    style=" height: 40px">
                      <option [ngValue]="null" selected disabled hidden>Select</option>
                      <option>Save</option>
                      <option>Download</option>

                    </select>

score 0 · Answer 4 · answered Sep 28 '20 at 08:51

0

Add this simply it will work.

<option value="" disabled>Select Category</option>

Or

<option [ngValue]="null">Select Category</option>

answered Sep 28 '20 at 08:51

Kashif Sheikh

41
1

Angular - select placeholder not showing

4 Answers4