Does anyone know the best way to do a form validation with ionic 3 and angular 6 with firebase? I am following a tutorial online called “Ionic 3 form validation” which works but when the user submits an empty form, they get a runtime error instead of the error message displaying under the text fields. Here is my code
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="formgroup">
<ion-list>
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="text" formControlName="email" name="email"></ion-input>
</ion-item>
<ion-item *ngIf="email.hasError('required') && email.touched">
<p>*Email is required</p>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" name="password" formControlName="password"></ion-input>
</ion-item>
<ion-item *ngIf="password.hasError('required') && password.touched">
<p>*password is required</p>
</ion-item>
</ion-list>
<button clear ion-button (click)="login()">Submit</button>
</form>
</ion-content>
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { SignupPage } from '../signup/signup';
import { Validators, FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
/**
* Generated class for the ProfilePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
email: AbstractControl;
password: AbstractControl;
formgroup: FormGroup;
constructor(public formbuilder: FormBuilder, public aAuth : AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
this.formgroup = formbuilder.group({
email:['',Validators.required],
password:['',Validators.required]
});
this.email = this.formgroup.controls['email'];
this.password = this.formgroup.controls['password'];
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
login(){
this.aAuth.auth.signInWithEmailAndPassword(this.email.value, this.password.value).then(
e => {console.log(e)}
)
}
goToSignup(){
this.navCtrl.push(SignupPage)
}
}