Error while validating, error messages not showing

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?