Error while validating, error messages not showing

Ionic Framework ionic-v3
1

In my sign up page, when wrong inputs are given, ionic error page is shown instead of the error messages embedded in the html.
error Message:

TypeError: Cannot read property 'value' of undefined

this is my sign-up.html page

<ion-header>
  <ion-navbar color="grey">
    <ion-title>
      Create an Account
    </ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <form [formGroup]="signupForm" (submit)="signupUser()" novalidate>

    <ion-item>
      <ion-label stacked>Email</ion-label>
      <ion-input formControlName="email" type="email" placeholder="Your email address" [class.invalid]="!signupForm.controls.email.valid && signupForm.controls.email.dirty"></ion-input>
    </ion-item>
    <ion-item class="error-message" *ngIf="!signupForm.controls.email.valid  && signupForm.controls.email.dirty">
      <p>Please enter a valid email.</p>
    </ion-item>

    <ion-item>
      <ion-label stacked>Password</ion-label>
      <ion-input formControlName="password" type="password" placeholder="Your password" [class.invalid]="!signupForm.controls.password.valid && signupForm.controls.password.dirty"></ion-input>
    </ion-item>
    <ion-item class="error-message" *ngIf="!signupForm.controls.password.valid  && signupForm.controls.password.dirty">
      <p>Your password needs more than 6 characters.</p>
    </ion-item>

    <button ion-button block type="submit">
      Create an Account
    </button>

  </form>

</ion-content>

And this is my sign-up.ts code

import { Component } from '@angular/core';
import {
	IonicPage,
	NavController,
	LoadingController,
	Loading,
	AlertController
} from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { AuthProvider } from '../../providers/auth/auth';
import { HomePage } from '../home/home';
import { EmailValidator } from '../../validators/email';
@IonicPage()
@Component({
	selector: 'page-sign-up',
	templateUrl: 'sign-up.html'
})
export class SignUpPage {
	public signupForm: FormGroup;
	public loading: Loading;

	constructor (
		public nav: NavController,
		public authData: AuthProvider,
		public formBuilder: FormBuilder,
		public loadingCtrl: LoadingController,
		public alertCtrl: AlertController
	) {
		this.signupForm = formBuilder.group({
			email:
				[
					'',
					Validators.compose([
						Validators.required,
						EmailValidator.isValid
					])
				],
			password:
				[
					'',
					Validators.compose([
            Validators.minLength(6),
            Validators.maxLength(50),
						Validators.required
					])
				]
    });
	}

	signupUser () {
    if (this.signupForm.contains['email'].value=="" || this.signupForm.contains['password']=="") {
			this.alertCtrl.create({
				title: 'Blank input value',
				message: 'Please fill up the form',
				buttons:
					[
						'OK'
					]
			});
		}
		else {
			if (!this.signupForm.valid) {
			}
			else {
				this.authData.signupUser(this.signupForm.value.email, this.signupForm.value.password).then(
					() => {
						this.nav.setRoot('ReceiveServiceListPage');
					},
					(error) => {
						this.loading.dismiss().then(() => {
							var errorMessage: string = error.message;
							let alert = this.alertCtrl.create({
								message: errorMessage,
								buttons:
									[
										{
											text: 'Ok',
											role: 'cancel'
										}
									]
							});
							alert.present();
						});
					}
				);

				this.loading = this.loadingCtrl.create({
					dismissOnPageChange: true
				});
				this.loading.present();
			}
		}
	}
}

What is the cause of the error?
How can i solve this?