I’m using the **Ionic 3 - badge** for for my app sidebar. i faced some conflict when i added badge but its not displayed
anyone know how to shown badge in side bar
Thanks
my code part
app.html
<ion-list class="user-list" >
<button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)" >
<ion-icon item-left [name]="menuItem.icon" style="color: black; " ></ion-icon>
<span ion-text style="color: black; border-bottom: none;">{{menuItem.title}}</span>
<ion-badge">{{p.badgeCount}}</ion-badge>
</button>
</ion-list>
app.component.ts
export interface MenuItem {
title: string;
component: any;
icon: string;
buttonName:string;
}
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = SigninPage;
selectedTheme: String;
appMenuItems: Array<MenuItem>;
constructor(public platform: Platform, private settings: SettingsProvider, private master: master) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
this.appMenuItems = [
{title: 'Home', component: HomePage, icon: 'ios-home-outline'},
{title: 'Notification', component: CheckoutPage, icon: 'ios-basket-outline',buttonName: 'badgeNumber ',},
];
}
I reslove the my problem
I change this <ion-badge>{{menuItem.badgeCount}}</ion-badge>
app.component.ts
export interface MenuItem {
title: string;
component: any;
icon: string;
buttonName:string;
}
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = SigninPage;
selectedTheme: String;
appMenuItems: Array<MenuItem>;
constructor(public platform: Platform, private settings: SettingsProvider, private master: master) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
this.appMenuItems = [
{title: 'Home', component: HomePage, icon: 'ios-home-outline'},
{title: 'Notification', component: CheckoutPage, icon: 'ios-basket-outline',badgeCount: '5 ',},
];
}
app.html
<ion-list class="user-list" >
<button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)" >
<ion-icon item-left [name]="menuItem.icon" style="color: black; " ></ion-icon>
<span ion-text style="color: black; border-bottom: none;">{{menuItem.title}}</span>
<ion-badge>{{menuItem.badgeCount}}</ion-badge>
</button>
</ion-list>
Related
output sample: output
In the furtherModules function, under the main module Environmental Compliance Management there is two sub modules which is Chemical Management and PPE Management, so when the user click Chemical Management it should go to a new page and when the user click PPE Management it should go to another page.I don't know how to do that. I really need help on this.
home.html code:
<ion-content class="outer-content">
<ion-card>
<ion-card-header>
{{content}}
</ion-card-header>
<ion-card-content>
<ion-segment [(ngModel)]="content" color="dark">
<ion-segment-button value="Environment Compliace Management">
<ion-icon name="flask"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Health & Safety Management">
<ion-icon name="medkit"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-list style="margin: 0" inset>
<button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules()">
<ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
{{sContent.name}}
</button>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
home.ts code:
import {Component} from '#angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {ModuleListPage} from '../module-list/module-list';
import { identifierName } from '#angular/compiler';
#Component({
templateUrl: 'home.html'
})
export class HomePage{
content="MODULES";
constructor(public navCtrl: NavController, public navParams: NavParams) {}
items: any = {
'Environmental Compliance Management': [
{
name: 'Chemical Management',
icon: 'nuclear',
},
{
name: 'PPE Management',
icon: 'man'
}
],
'Health & Safety Management': [
{
name: 'Emergency Incident Management',
icon: 'alert'
},
{
name: 'Machinery Management',
icon: 'construct'
},
{
name: 'Risk Management',
icon: 'cog'
}
]
};
getContentItems(type:any){
return this.items[type];
}
furtherModules(){
}
}
First need to identify which page are we directing to, for an example in my case i generate a dummy page which is 'MyAwesomePage' and 'MyAnotherAwesomePage' then in .ts file need to do something like this
{
name: 'Chemical Management',
icon: 'nuclear',
goTo: 'MyAwesomePage'
},
{
name: 'PPE Management',
icon: 'man',
goTo: 'MyAnotherAwesomePage'
}
public furtherModules(sContent:any): void{
// Validate here if sContent.goTo is a valid page
this.navCtrl.push(sContent.goTo, {_sContent: sContent});
}
after that, in .html file need to do something like this
<ion-list style="margin: 0" inset>
<button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules(sContent)">
<ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
{{sContent.name}}
</button>
</ion-list>
Ok i just understand what do you want to achieve
You must create a page for both Environment Compliace Management and Health & Safety Management using cli below
ionic g page Environment Compliace Management
ionic g page Health & Safety Management
refer to this link for more details,better to read the documentation first.
Add your page to your app.module.ts refer to this tutorial i dont need to explain it
third do something like below
In your html file put some input paramers to your furthermodules function
(click)="furtherModules(content)
In your ts file do something like below
furtherModules(type:any){
if('Environment Compliace Management'){
this.navCtrl.push(*name of your page to environment compliace management*)
}
else{
this.navCtrl.push(*name of your page to Health & Safety Management*)
}
}
I have a nested form created for an ionic project, in which I have formGroups that contain formArray, and each formArray has one or more formGroups, itself.
The process of saving data works great. I can have as many formArrays with as many formGroups as I like.
My problem is when I am trying to populate the form with a saved data. I cannot add correctly the data inside the formArrays.
This is my edit script:
import { Component } from '#angular/core';
import { FormBuilder, FormControl, FormArray, FormGroup, Validators } from '#angular/forms';
import { NavController, NavParams } from 'ionic-angular';
import { Todos } from '../../providers/todos';
import { HomePage } from '../home/home';
import { Patient } from '../../interfaces/patient.interface';
#Component({
selector: 'page-edit',
templateUrl: 'edit.html'
})
export class EditPage {
patient: any;
patientDate: any;
editTodoForm: FormGroup;
submitted: boolean;
events: any[] = [];
constructor(public navCtrl: NavController, public todoService: Todos, public navParams: NavParams, public formBuilder: FormBuilder) {
this.patient = this.navParams.data;
this.patientDate = new Date(this.patient.date).toISOString();
this.editTodoForm = formBuilder.group({
_id: [this.patient._id],
_rev: [this.patient._rev],
firstName: [this.patient.firstName, Validators.compose([Validators.pattern('[a-zA-Z ]*'), Validators.required])],
date: [this.patientDate],
botoxes: this.formBuilder.array([]),
acids: this.formBuilder.array([])
});
this.subcribeToFormChanges();
this.addBotox();
this.addAcid();
}
ionViewDidLoad() {
console.log('ionViewDidLoad EditPage');
this.editTodoForm.setValue(this.patient);
}
initBotox() {
return this.formBuilder.group({
botoxDate: [''],
botoxTypes: this.formBuilder.array([
this.formBuilder.group({
botoxType: [''],
botoxZone: [''],
botoxUnit: ['']
})
])
});
}
addBotox() {
const control = <FormArray>this.editTodoForm.controls['botoxes'];
const botoxCtrl = this.initBotox();
if(this.patient.botoxes) {
this.patient.botoxes.forEach(botox => {
control.push(botoxCtrl);
})
} else {
control.push(botoxCtrl);
}
}
removeBotox(i: number) {
const control = <FormArray>this.editTodoForm.controls['botoxes'];
control.removeAt(i);
}
initAcid() {
return this.formBuilder.group({
acidDate: [''],
acidTypes: this.formBuilder.array([
this.formBuilder.group({
acidType: [''],
acidZone: [''],
acidUnit: ['']
})
])
});
}
addAcid() {
const control = <FormArray>this.editTodoForm.controls['acids'];
const acidCtrl = this.initAcid();
control.push(acidCtrl);
}
removeAcid(i: number) {
const control = <FormArray>this.editTodoForm.controls['acids'];
control.removeAt(i);
}
subcribeToFormChanges() {
const myFormStatusChanges$ = this.editTodoForm.statusChanges;
const myFormValueChanges$ = this.editTodoForm.valueChanges;
myFormStatusChanges$.subscribe(x => this.events.push({ event: 'STATUS_CHANGED', object: x }));
myFormValueChanges$.subscribe(x => this.events.push({ event: 'VALUE_CHANGED', object: x }));
}
updateTodo(model: Patient, isValid: boolean) {
this.submitted = true;
this.todoService.updateTodo(this.editTodoForm.value);
this.navCtrl.setRoot(HomePage);
}
}
This is the edit html:
<ion-header no-border>
<ion-navbar color="primary">
<ion-title>Editeaza pacient</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="editTodoForm" novalidate>
<div [hidden]="editTodoForm.controls.firstName.valid || (editTodoForm.controls.firstName.pristine && !submitted)" class="error-notification">
Pacientul trebuie sa aiba cel putin un nume si un prenume
</div>
<ion-card>
<ion-card-header>
Date personale
</ion-card-header>
<ion-list padding>
<ion-item>
<ion-label stacked>Prenume pacient</ion-label>
<ion-input type="text" formControlName="firstName"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Dată activitate</ion-label>
<ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MMMM YYYY" formControlName="date"
monthNames="ianuaie, februarie, martie, aprilie, mai, iunie, iulie, august, septembrie, octombrie, noiembrie, decembrie"></ion-datetime>
</ion-item>
</ion-list>
</ion-card>
<ion-card>
<ion-card-header>
Tratamente botox
</ion-card-header>
<ion-list padding>
<ion-card formArrayName="botoxes">
<div *ngFor="let botox of editTodoForm.controls.botoxes.controls; let i=index">
<p class="card-heading">
<span>Tratament cu botox {{i + 1}}</span>
<button ion-button icon-only *ngIf="editTodoForm.controls.botoxes.controls.length > 1" (click)="removeBotox(i)" class="right-button remove-button">
<ion-icon name="trash"></ion-icon>
</button>
</p>
<div [formGroupName]="i">
<botoxInputs [group]="editTodoForm.controls.botoxes.controls[i]"></botoxInputs>
</div>
</div>
</ion-card>
<button (click)="addBotox()" ion-button icon-left>
<ion-icon name="add"></ion-icon>
Adauga tratament cu botox
</button>
</ion-list>
</ion-card>
<ion-card>
<ion-card-header>
Tratamente acid hialuronic
</ion-card-header>
<ion-list padding>
<ion-card formArrayName="acids">
<div *ngFor="let acid of editTodoForm.controls.acids.controls; let i=index">
<p class="card-heading">
<span>Tratament cu acid hialuronic {{i + 1}}</span>
<button ion-button icon-only *ngIf="editTodoForm.controls.acids.controls.length > 1" (click)="removeAcid(i)" class="right-button remove-button">
<ion-icon name="trash"></ion-icon>
</button>
</p>
<div [formGroupName]="i">
<acidInputs [group]="editTodoForm.controls.acids.controls[i]"></acidInputs>
</div>
</div>
</ion-card>
<button (click)="addAcid()" ion-button icon-left>
<ion-icon name="add"></ion-icon>
Adauga tratament cu acid hialuronic
</button>
</ion-list>
</ion-card>
<div padding>
<button ion-button color="primary" block type="submit" (click)="createPatient(editTodoForm, editTodoForm.valid)">Salveaza date pacient</button>
</div>
</form>
</ion-content>
And this is an example of a saved JSON I am trying to add back to the form:
{
"firstName": "Ionescu Ion",
"date": "2017-02-01T00:00:00.000Z",
"botoxes": [{
"botoxDate": "2017-02-01",
"botoxTypes": [{
"botoxType": "Xeomin 100UI",
"botoxZone": ["Frunte", "Crow feet", "Sprânceană"],
"botoxUnit": "111"
}, {
"botoxType": "Azzalure 50UI",
"botoxZone": ["Glabelar", "Intersprincenos", "Frunte"],
"botoxUnit": "222"
}]
}],
"acids": [{
"acidDate": "2017-02-01",
"acidTypes": [{
"acidType": "Juvederm Volift",
"acidZone": ["Periocular", "Tâmple"],
"acidUnit": "0.5 ml"
}]
}],
"_id": "0A418E81-CFD0-545B-B8DB-A326CECFC5F1",
"_rev": "3-f2914e24db5fac42930dba548f418cbd"
}
My problem is that I can get only on e botoxType displayed of the two botoxTypes.
I would really appreciate any help
For anyone having the same issues as I had. This is how I changed my edit script to set initial values properly on formArrays:
import { Component } from '#angular/core';
import { FormBuilder, FormArray, FormGroup, Validators } from '#angular/forms';
import { NavController, NavParams } from 'ionic-angular';
import { Todos } from '../../providers/todos';
import { HomePage } from '../home/home';
import { Patient } from '../../interfaces/patient.interface';
#Component({
selector: 'page-edit',
templateUrl: 'edit.html'
})
export class EditPage {
patient: any;
editTodoForm: FormGroup;
submitted: boolean;
events: any[] = [];
constructor(public navCtrl: NavController, public todoService: Todos, public navParams: NavParams, public formBuilder: FormBuilder) {
this.patient = this.navParams.data;
this.editTodoForm = formBuilder.group({
_id: [this.patient._id],
_rev: [this.patient._rev],
firstName: ['', Validators.compose([Validators.pattern('[a-zA-Z ]*'), Validators.required])],
date: [''],
botoxes: this.formBuilder.array([]),
acids: this.formBuilder.array([])
});
this.subcribeToFormChanges();
if(this.patient.botoxes.length > 0) {
this.patient.botoxes.forEach(botox => {
let btys = botox.botoxTypes.length;
this.addBotox(btys);
});
} else {
this.addBotox(1);
}
if(this.patient.acids.length > 0) {
this.patient.acids.forEach(acid => {
let atys = acid.acidTypes.length;
this.addAcid(atys);
});
} else {
this.addAcid(1);
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad EditPage');
const value: Patient = this.navParams.data;
(<FormGroup>this.editTodoForm).patchValue(value, { onlySelf: true });
}
initBotox(number) {
return this.formBuilder.group({
botoxDate: [''],
botoxTypes: this.addBotoxTypes(number)
});
}
initBotoxTypes() {
return this.formBuilder.group({
botoxType: [''],
botoxZone: [''],
botoxUnit: ['']
});
}
addBotoxTypes(number) {
let bts = new FormArray([]);
for(let i = 0; i < number; i++) {
bts.push(this.initBotoxTypes())
}
return bts;
}
addBotox(number) {
const control = <FormArray>this.editTodoForm.controls['botoxes'];
const botoxCtrl = this.initBotox(number);
control.push(botoxCtrl);
}
removeBotox(i: number) {
const control = <FormArray>this.editTodoForm.controls['botoxes'];
control.removeAt(i);
}
initAcid(number) {
return this.formBuilder.group({
acidDate: [''],
acidTypes: this.addAcidTypes(number)
});
}
initAcidTypes() {
return this.formBuilder.group({
acidType: [''],
acidZone: [''],
acidUnit: ['']
});
}
addAcidTypes(number) {
let acs = new FormArray([]);
for(let i = 0; i < number; i++) {
acs.push(this.initAcidTypes())
}
return acs;
}
addAcid(number) {
const control = <FormArray>this.editTodoForm.controls['acids'];
const acidCtrl = this.initAcid(number);
control.push(acidCtrl);
}
removeAcid(i: number) {
const control = <FormArray>this.editTodoForm.controls['acids'];
control.removeAt(i);
}
subcribeToFormChanges() {
const myFormStatusChanges$ = this.editTodoForm.statusChanges;
const myFormValueChanges$ = this.editTodoForm.valueChanges;
myFormStatusChanges$.subscribe(x => this.events.push({ event: 'STATUS_CHANGED', object: x }));
myFormValueChanges$.subscribe(x => this.events.push({ event: 'VALUE_CHANGED', object: x }));
}
updateTodo(model: Patient, isValid: boolean) {
this.submitted = true;
this.todoService.updateTodo(this.editTodoForm.value);
this.navCtrl.setRoot(HomePage);
}
}
I'm building an app in Ionic for which I need to have a mask input where the user can input numbers, but the mask format is 99-99999999-9 (user can input numbers only). I'm using angular2-text-mask for masking the inputs.
If I have my input as type = number, the app crash when the mask is trying to add a "-" in the input. If I put type = text it works fine! But the keyboard is the regular one, so it's not the best user experience.
I thought that a good solution could be to have input type = text but find the way to show the number keyboard. Is that possible?
EDIT (adding code):
Component:
import { Component } from '#angular/core';
import { NavController, NavParams, AlertController } from 'ionic- angular';
import {Validators, FormBuilder} from '#angular/forms';
import { AccountInformation } from '../accountInformation/accountInformation';
import { TextMaskModule } from 'angular2-text-mask';
#Component({
selector: 'page-addAccount',
templateUrl: 'addAccount.html'
})
export class AddAccount {
account: any;
item: any;
public cuitMask = [/[1-9]/, /[1-9]/, '-', /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, /[1-9]/, '-' , /[1-9]/]
constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, private formBuilder: FormBuilder) {
this.account = this.formBuilder.group({
number: ['', Validators.required],
cuit: ['', Validators.required]
});
}
}
View:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card>
<form [formGroup]="account" (ngSubmit)="submit()" novalidate>
<ion-list>
<ion-item>
<ion-label floating>Numero de Cuenta</ion-label>
<ion-input class="input-default" autofocus text-center type="number" formControlName="number"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>CUIT</ion-label>
<ion-input class="input-default" [textMask]="{mask : cuitMask}" autofocus text-center type="text" formControlName="cuit"></ion-input>
</ion-item>
<ion-item>
<button type="submit" class="footer-button" [disabled]="!account.valid" ion-button block>AGREGAR</button>
</ion-item>
</ion-list>
</form>
</ion-card>
Trying to figure out this problem. I am getting a maxmimum call stack size error and the link below is the js output.
I have added print statements and worked out the main app file is calling page1 as it should but then page1 is calling the main app file and this continues.
I am new to ionic 2 and would really appreciate a solution, thanks.
Javascript Output
page1.ts
import { Component } from '#angular/core';
import { Data } from '../../providers/data';
import { NewListPage } from '../new-list/new-list';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-page1',
templateUrl: 'page1.html',
})
export class Page1 {
public list: any[] = [];
constructor(public navCtrl: NavController, private _data: Data) {
console.log('Page1BEFORE');
let that = this;
this._data.list.subscribe((data) => {that.list.push(data);}, (err) => {console.error(err);});
}
newList() {
console.log('NEWLIST1');
this.navCtrl.push(NewListPage);
}
}
page1.html
<ion-app>
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Page One</ion-title>
<ion-buttons end>
<ion-icon ios="ios-contact" md="md-contact"></ion-icon>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="grid-basic-page">
<ion-col width-100><progress class="progressBar" max="100" value="80"></progress></ion-col>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-list *ngIf="list">
<ion-item *ngFor="let item of list">
<ion-label>{{item.title}}</ion-label>
</ion-item>
</ion-list>
<p *ngIf="!list"> No Lists </p>
<button fab fab-bottom fab-right (click)="newList()"> New </button>
</ion-content>
</ion-app>
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Data } from '../providers/data';
#Component({
templateUrl: 'app.html',
providers: [Data],
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform) {
console.log('PreAPP');
this.initializeApp();
console.log('PostApp');
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Page One', component: Page1 },
{ title: 'Page Two', component: Page2 }
];
console.log('pages');
}
initializeApp() {
console.log('APP');
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
openPage(page) {
console.log('OpenPAGE');
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{ p.title }}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Removing the <ion-app> element from page1.html fixed the issue
In my case I had not declared and added routes constant in imports array of the module. Once declared and imported error gone.
I am using IONIC 4
I have a Login page. It was working fine. I changed the login form to use FormBuilder.
There is no error during build process or any reported in the developer tool. But the application shows blank screen when running with ionic serve.
Below is the code changed in login.html.
<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-input type="text" placeholder="Username" formControlName="username" ></ion-input>
</ion-item>
<p *ngIf="username.hasError('required') && username.touched" danger>Username is required</p>
<ion-item>
<ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
</ion-item>
<p *ngIf="password.hasError('required') && password.touched" danger>Password is required</p>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" full type="submit" [disabled]="!loginForm.valid">Login</button>
<button ion-button class="register-btn" block clear (click)="createAccount()">Create New Account</button>
</ion-col>
</ion-row>
</form>
Below is the code changed in login.ts.
import { Component } from '#angular/core';
import { NavController, AlertController, LoadingController, Loading } from 'ionic-angular';
import { FormBuilder, FormGroup, FormControl, Validators } from '#angular/forms';
import { AuthService } from '../../providers/auth-service';
import { RegisterPage } from '../register/register';
import { HomePage } from '../home/home';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
loading: Loading;
registerCredentials = {username: '', password: ''};
loginForm: FormGroup;
username: FormControl;
password: FormControl;
constructor(private nav: NavController, private auth: AuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController,
public formBuilder: FormBuilder) {
this.loginForm = formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required],
});
this.username = this.loginForm['username'];
this.password = this.loginForm['password'];
}