Ionic 3 validation is not working on "invalid && dirty" - ionic-framework

Question

I am trying to implement a validation for inputs in Ionic. For some reason the validation is not firing up. Please see my code below:
<form #loginForm="ngForm" novalidate>
<ion-card>
<ion-card-content>
<ion-item>
<ion-label floating>Email Address</ion-label>
<ion-input
[(ngModel)]="account.email"
type="email"
name="email"
#email="ngModel"
required
pattern="[A-Za-z0-9._%+-]{3,}#[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"></ion-input>
</ion-item>
<div padding *ngIf="email.invalid && email.dirty">
<span>Email address is not valid.</span>
</div>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input
[(ngModel)]="account.password"
type="password"
name="password"
#password="ngModel"
required></ion-input>
</ion-item>
</ion-card-content>
<ion-row class="login-form__buttons">
<div>
<button ion-button (click)="navigateToRegisterPage()" color="secondary">Register</button>
<button ion-button (click)="login()" color="primary">Login</button>
</div>
</ion-row>
</ion-card>
</form>
The Email address is not valid. is not showing. I would really appreciate your help.

Answer 1

With the Ionic version 3.19.1, when you change something in the html of a component, the changes does not reflect. You have to change something at a .ts and save.