Placeholder doesn't work when type="text" and have an ng-model

I noticed that my placeholder value doesn’t work when the type=“text” and I use the ng-model directive on the element. For example the placeholder does not show with this code,

<label class="item item-input">
    <input ng-model="" type="text" placeholder="Name" autofocus />

but the placeholder value shows when I remove ng-model.

<label class="item item-input">
    <input type="text" placeholder="Name" autofocus />

This seems to only affect type=“text” because the placeholder will show if I change it to type=“email”. Any idea how to fix?


It could happen if your model contains only spaces (something like " ").
Make sure is either null, undefined or a non-empty string.

You’re right, I have my model defaulted to " ". What is strange though is that I have an empty string for a model attribute on a type=“email” input and the placeholder works.

Yeah, it seems like email fields behave differently in that case.
Anyway, using " " as a default is not a very good practice. null or an empty string are much better, if only for the reason they evaluate to false.

1 Like

cool thanks for the tip!