Ionic Input shows [object Object] as placeholder

Ionic Framework ionic-v3
1

Hello Ionic community,

I am very new to the Ionic Framework, Angular JS and TypeScript but trying to improve as fast as possible.
But now I encountered a problem I can’t seem to solve, not even using Google :smile:

So I was just trying a simple Input function.
This is the relevant part of my .html file:

<ion-content padding>
    <ion-item>
        <ion-input type="text" placeholder="Enter token" [(ngModel)]="var1"></ion-input>
     </ion-item>
     <button ion-button block (click)="login()">Login</button>
</ion-content>

And this is the relevant part of my .ts file:

export class StartPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

 var1 ={}
  login() {
    console.log(this.var1);
    if(this.var1=="Hallo"){
     doSomething();
    }
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
}

So the Input field should show “Enter token” as a placeholder, right?
But when I run ionic lab it just shows “[object Object]”. So why is that?

By the way I regarded the page https://ionicframework.com/docs/developer-resources/forms/ for this, but just wanted to make this feature as simple as possible.

I am grateful for any hints.

2

Because of the bolded part in the ion-input documentation for placeholder:

Instructional text that shows before the input has a value.

So once the input has a value (which it does when you bind [ngModel]), the placeholder attribute is ignored. <ion-input> is expecting its ngModel to be a string, and if it isn’t, it tries to coerce it into one, and Object-to-string coercion on your var1 of {} which is an Object results in “[object Object]”.

1 Like
3

Thanks for the quick answer, I see the problem.
So do you know of an easy way to only bind [(ngModel)] once you click the Login Button, while still being able to get the input? I was trying out a few things but couldn’t find an easy workaround.

4

No, and I can’t even make any sense out of that. If what you are trying to achieve is changing what appears in the input control before the user starts entering anything into it, you have two options, both of which need var1 to be a string and not an object:

Option 1: simply prime the backing property

var1 = "placeholder text can go here";

<ion-input [(ngModel)]="var1"></ion-input>

Option 2: placeholder will do its job if the bound property is an empty string:

var1 = "";

<ion-input [(ngModel)]="var1" placeholder="placeholder text can also go here"></ion-input>
1 Like
5

Oh yes that’s what I was trying to do. your second option works very well for me, thanks a lot.

Edit: is there any way to mark this as answered? or should I just edit the title

6

I think there is supposed to be a checkbox next to each response that you as the OP can use to mark a particular post as the solution.

1 Like