login page validation works

Author: silencer07

src/pages/login/login.html

@@ -8,31 +8,51 @@
 
 
 <ion-content padding>
-  <ion-grid align="center">
-    <ion-row>
-      <ion-col>
-        <form [formGroup]="form">
-          <ion-list>
+    <form [formGroup]="form" novalidate (submit)="authenticate()">
+      <ion-grid align="center">
+        <ion-row>
+          <ion-col>
             <ion-item>
               <ion-input type="text" placeholder="Email" formControlName="username" autocorrect="off" autocapitalize="none"></ion-input>
             </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row *ngIf="!form.controls.username.valid && (form.controls.username.dirty && hasSubmitted)">
+          <ion-col>
+            <ion-item class="error-message">
+              Should be a valid email
+            </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
             <ion-item>
               <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
             </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row *ngIf="!form.controls.password.valid && (form.controls.password.dirty && hasSubmitted)">
+          <ion-col>
+            <ion-item class="error-message">
+              Password should be at least 4 characters long
+            </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
             <ion-item>
               <ion-label>Remember me</ion-label>
               <ion-checkbox formControlName="rememberMe"></ion-checkbox>
             </ion-item>
-          </ion-list>
-        </form>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-        <button ion-button block color="secondary" (click)="authenticate()">
-          Login
-        </button>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+            <button ion-button block color="secondary" type="submit" [disabled]="false">
+              Login
+            </button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </form>
 </ion-content>

src/pages/login/login.scss

@@ -1,3 +1,6 @@
 page-login {
-
+  .error-message{
+    color: red;
+    font-size: small;
+  }
 }

src/pages/login/login.ts

@@ -19,13 +19,14 @@ import {HomePage} from "../home/home";
 export class LoginPage {
 
   form: FormGroup;
+  hasSubmitted: boolean = false;
 
   constructor(public navCtrl: NavController, public navParams: NavParams,
               private formBuilder: FormBuilder,private authService: AuthService,
               private loadingController: LoadingController, private alertController: AlertController) {
     this.form = this.formBuilder.group({
-      username: ['', Validators.required],
-      password: ['', Validators.required],
+      username: ['', Validators.email],
+      password: ['', [Validators.required, Validators.minLength(4)]],
       rememberMe: [true]
     });
 
@@ -40,23 +41,29 @@ export class LoginPage {
   }
 
   authenticate(){
-    let loader = this.loadingController.create({
-      content: "Logging in. Please wait..."
-    });
-    loader.present();
-    this.authService.authenticate(this.form.value)
-      .subscribe((user: User) => {
-        loader.dismissAll();
-        this.navCtrl.setRoot(HomePage);
-      }, (error: any) => {
-        loader.dismissAll();
-        let message = this.alertController.create({
-          title: 'Login Error',
-          subTitle: 'Invalid username and/or password. If you registered already, please make sure to verify your email.',
-          buttons: ['OK']
-        });
-        message.present();
+    this.hasSubmitted = true;
+
+    if(this.form.valid){
+      let loader = this.loadingController.create({
+        content: "Logging in. Please wait..."
       });
+      loader.present();
+      this.authService.authenticate(this.form.value)
+        .subscribe((user: User) => {
+          loader.dismissAll();
+          this.navCtrl.setRoot(HomePage);
+        }, (error: any) => {
+          loader.dismissAll();
+          let message = this.alertController.create({
+            title: 'Login Error',
+            subTitle: 'Invalid username and/or password. If you registered already, please make sure to verify your email.',
+            buttons: ['OK']
+          });
+          message.present();
+        });
+    }else {
+
+    }
   }
 
 }