Angular 2 ngModel返回[对象]

Question

Just getting started with Angular 2 on an Ionic 2 project. I have a simple login form:

  <ion-list>
    <ion-item></ion-item>
    <ion-item>
      <ion-label fixed>Email</ion-label>
      <ion-input [(ngModel)]="loginData.Email" type="text" value=""></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>Password</ion-label>
      <ion-input [(ngModel)]="loginData.Password" type="password"></ion-input>
    </ion-item>
  </ion-list>

On the backend I have the object

export class LoginPage {
  user: User;
  local: Storage;
  loginData = { Email: null, Password: null};

  login() {
    console.log(this.loginData);
  }
}

When I type in the username and password though and try to access the data using a console.log the password is showing as:

Object {Email: "email - removed", Password: "[object Object]"}

Trying something like this.loginData.Password = String(this.loginData.Password); results in the same thing.

This also results in the same thing console.log(JSON.stringify(this.loginData.Password));

Answer 1

The issue is that ngModel is not accepting interpolation as an argument.

ngModel Documentation

your code should look like:

<ion-input [(ngModel)]="loginData.Password" type="password"></ion-input> 

this seems to work just fine:

<input type="text" [(ngModel)]="loginData.Email" >


<input type="password" [(ngModel)]="loginData.Password" >

<button (click)="login()">login</button>

login:

loginData = { Email:null, Password: null};

login() {
  console.log(this.loginData);
}

Answer 2

I was able to find a workaround. I don't know why this works and the other doesn't, but if I store the values this way

  Email: string;
  Password: string;

And not in an object it worked fine.