I implemented a simple login with email and password and it works when I test in the browser as well as Ionic DevApp. However the login fails when I build the project and run it on an actual Android phone because it seems as though the binding of the inputs to the class properties isn’t happening as they’re always undefined
. Here’s my login.page.html:
<form>
<ion-item>
<ion-label position="floating">Email Address</ion-label>
<ion-input type="email" name="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" name="password" [(ngModel)]="password"></ion-input>
</ion-item>
<div text-left style="margin-top: 30px; padding: 0 10px;">
<ion-button color="tertiary" shape="round" (click)="SignIn()" expand="full">
SIGN IN
<ion-icon slot="end" name="md-log-in"></ion-icon>
</ion-button>
</div>
</form>
Here’s my login.page.ts:
import { Component, OnInit } from '@angular/core';
import { NavController, AlertController, LoadingController, MenuController } from '@ionic/angular';
import { UserService } from '../user.service';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit
{
public email: string;
public password: string;
constructor(public nav:NavController, public auth: UserService, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public menuCtrl: MenuController)
{
this.menuCtrl.enable(false);
}
ngOnInit()
{
}
async SignIn()
{
await this.auth.Login({ email: this.email, password: this.password });
if ( this.auth.CurrentUser != undefined && this.auth.CurrentUser.Code == 1)
{
this.nav.navigateForward("/home");
}
else if ( this.auth.CurrentUser != undefined && this.auth.CurrentUser.Message != "" )
{
this.ShowMessage("Error", this.auth.CurrentUser.Message);
}
}
}
And here’s a piece of my user.service.ts:
async Login( login: any )
{
if ( login.email === undefined || login.password === undefined )
{
this.CurrentUser = { Code: -1, Message: `Email address and password required.` }; // IT KEEPS FAILING HERE
return;
}
var loading = await this.ShowLoading();
try
{
var url = `${this.APIUrl}/api/Account/Get?email=${login.email}&password=${login.password}&apikey=${this.APIKey}`;
this.CurrentUser = await this.http.get<iUserModel>(url).toPromise();
// Store User Details
this.storage.set("CurrentUser", this.CurrentUser);
}
catch( error )
{
loading.dismiss();
this.CurrentUser = { Code: -1, Message: JSON.stringify( error ) };
return;
}
loading.dismiss();
}
I’ve checked the login.module.ts does import the FormsModule. Is there something I am missing?