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

ionic-v1
1

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="spot.name" type="text" placeholder="Name" autofocus />
</label>

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

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

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

Thanks

2

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

3

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.

4

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
5

cool thanks for the tip!