Angular select placeholder not showing

Question

I am trying to add a select that shows a placeholder by default like this:

<select id="type" formControlName="type">
  <option hidden value="" [disabled]="true" [selected]="true">Placeholder</option>
  <option *ngFor="let item of ['test 1', 'test 2']" [value]="item">{{ item }}</option>
</select>

I don't see Placeholder in the select when I load the page. But if I do:

<select id="type" formControlName="type">
  <option hidden value="" [disabled]="true" [selected]="true">Placeholder</option>
  <option>test 1</option>
  <option>test 2</option>
</select>

I see it. What is wrong with *ngFor that it does not show the placeholder?

I don't see any issue with your code, I can see a placeholder both ways. See here, I have used your code as it is - stackblitz.com/edit/… Kindly create a working example reproducing your issue. — Shyam Joshi
– Shyam Joshi, Commented Dec 2, 2021 at 17:59
Does this answer your question ? stackoverflow.com/a/68849750/6444705 — Emilien
– Emilien, Commented Dec 3, 2021 at 8:35

Johnny Am · Accepted Answer · 2021-12-02 15:52:24Z

0

I faced similar problems with the select placeholder and each time had different solutions working. Try just leaving the disabled and selected (remove the hidden) or maybe assign to your FormControlName an initial dummy value like -1 and then set the placeholder option value to -1.

answered Dec 2, 2021 at 15:52

Johnny Am

752 silver badges10 bronze badges

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

Comments

Magni Hansen · Accepted Answer · 2022-11-22 21:32:36Z

0

I'm using A14 and NonNullableFormBuilder. There I set the default value for the formControlName to -1 when initializing the control on the FormBuilder and then add -1 to the value attribute of the default option to show. Then you can set a validator value for checking if the value is higher than -1.

answered Nov 22, 2022 at 21:32

Magni Hansen

10211 bronze badges

Collectives™ on Stack Overflow

Angular select placeholder not showing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related