Form validation not working

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-content padding>
  <form [formGroup]="formgroup">
           <ion-input type="text" formControlName="email" name="email"></ion-input>
        <ion-item *ngIf="email.hasError('required') && email.touched">
          <p>*Email is required</p>

            <ion-input type="password" name="password" formControlName="password"></ion-input>
         <ion-item *ngIf="password.hasError('required') && password.touched">
           <p>*password is required</p>
    <button clear ion-button (click)="login()">Submit</button>
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 for more info on
 * Ionic pages and navigation.

  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 ={
    }); = this.formgroup.controls['email'];
    this.password = this.formgroup.controls['password'];

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');

   this.aAuth.auth.signInWithEmailAndPassword(, this.password.value).then(
     e => {console.log(e)}



Ordinarily one would disable the submit button until the form is valid.

1 Like

Is there a way to take each runtime error and customize them ?