Object Object Error received when submitting form in ionic

Question

Every time I clicked on submit button in my login page, the message it return is [Object Object]. I am trying to get users login details from the database using http request but it failed every time I run it.

I have applied to it different approach but I am still getting the same error.

I am still new to ionic and how it works, all I am doing is following some tutorials online which are not that much detailed.

My main issue is getting users details from mysql, accessing it and validate all the imputs.

Below are my Login form details:

Login.html

 <ion-content class="login-content" padding>
      <ion-row class="logo-row">
        <ion-col></ion-col>
        <ion-col >
          <img src="../assets/imgs/logo.png" class="img-responsive " id="img2">
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
      <div class="login-box">
        <form (ngSubmit)="login()" #registerForm="ngForm">
          <ion-row>
            <ion-col>
              <ion-list inset>

                <ion-item>
                  <ion-input type="text" placeholder="Email" name="email" [(ngModel)]="data.email" required></ion-input>
                </ion-item>

                <ion-item>
                  <ion-input type="password" placeholder="Password"  name="password" [(ngModel)]="data.password" required></ion-input>
                </ion-item>

              </ion-list>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="signup-col">
              <div align="center">
              <button ion-button class="submit-btn" full type="submit"  [disabled]="!registerForm.form.valid">Login</button>
              <span class="tell">- or -</span>
              <button ion-button class="register-btn" type="button" block clear (click)="createAccount()">Create New Account</button>
            </div>
            </ion-col>
          </ion-row>

        </form>
      </div>
    </ion-content>

Login.ts

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { Myprovider } from '../../providers/myprovider/myprovider';
import { Storage } from '@ionic/storage';


@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  providers: [Myprovider]
})
export class LoginPage {
  loading: Loading;
  data: any;
  public local : Storage;


  constructor(private nav: NavController, private auth: Myprovider, private alertCtrl: AlertController, private loadingCtrl: LoadingController, private service: Myprovider) 
  {
    this.data = {};
    this.data.email = "";
    this.data.password = "";
    //this.local = new Storage();

   }

   ionViewDidLoad() {
    this.createLoader();
  }

  createLoader(message: string = "Please wait...") { // Optional Parameter
    this.loading = this.loadingCtrl.create({
      content: message
    });
  }


  public createAccount() {
    this.nav.push('RegisterPage');
  }

  public login() {
    this.showLoading()
    let email = this.data.email;
    let password = this.data.password;
    let data = JSON.stringify({email, password});
    this.service.login(data);
    this.auth.login(this.data).subscribe(allowed => {
      if (allowed) {        
        this.nav.setRoot('DashboardPage');
      } else {
        this.showError("Access Denied");
      }
    },
      error => {
        this.showError(error);
      });
  }

  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: 'Please wait...',
      dismissOnPageChange: true
    });
    this.loading.present();
  }


  showError(text) {
    this.loading.dismiss();

    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    //alert.present(prompt);
    alert.present();
  }
}

MyProvider.ts

import { HttpClient } from '@angular/common/http';
import { Http } from '@angular/http';
import { Storage } from '@ionic/storage';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';


export class User {
  name: string;
  email: string;

}

@Injectable()
export class Myprovider {
  public local : Storage;

  mydata: any;

  constructor(private http: HttpClient) {
    this.http = http;

   //this.local = new Storage() 
  }

  currentUser: User;

  public login(credentials) {
let link = "http://localhost:90/mySchool/api/securelogin.php";
      return this.http.post(link, credentials)
        .map(credentials => {
          this.mydata = credentials;
          console.log("data")
        }, error =>{
          console.log(error)
        })
  }

  public register(credentials) {
    if (credentials.email === null || credentials.password === null) {
      return Observable.throw("Please insert credentials");
    } else {
      // At this point store the credentials to your backend!
      return Observable.create(observer => {
        observer.next(true);
        observer.complete();
      });
    }
  }

  public getUserInfo() : User {
    return this.currentUser;
  }

  public logout() {
    return Observable.create(observer => {
      this.currentUser = null;
      observer.next(true);
      observer.complete();
    });
  }

}

Lastly, the php file

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("localhost", "root", "", "cihmeeting");
    //http://stackoverflow.com/questions/18382740/cors-not-working-php
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }
    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers:     {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
        exit(0);
    }
    //http://stackoverflow.com/questions/15485354/angular-http-post-to-php-and-undefined
    $postdata = file_get_contents("php://input");
    if (isset($postdata)) {
        $request = json_decode($postdata);
        $email = $request->email;
        $password = $request->password;
                $data = array();
        if ($password != "" && $email != "") {

            $sel="SELECT * FROM users WHERE email='$email' AND password='$password'";
            $result=$conn->query($sel);
            $numrow=$result->num_rows;
            if($numrow == 1){
               include 'http://localhost:90/mySchool/api/tokengenerate.php';
                       $token = generateRandomString();

                       $update = "update users set token='$token' WHERE email='$email' AND password='$password'";
                       $qr = $conn->query($update);
                          if($qr){
                             $st = "SELECT email, token FROM users WHERE email='$email' AND password='$password'";
                             $query = $conn->query($st);
                              while($row = $query->fetch_assoc()){
                                   $data[] = array(
                                     "email" => $row['email'],
                                     "token" => $row['token']
                                    );
                                  echo json_encode($data);
                             }
                           }
            }

        }
        else {
            header('HTTP/1.1 401 Unauthorized', true, 401);
        }
    }
    else {
        echo "Not called properly with email parameter!";
    }
?>