validation added to login page

src/app/auth/login/login.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -13,6 +13,7 @@ import { LoginPage } from './login.page';
     CommonModule,
     FormsModule,
     IonicModule,
+    ReactiveFormsModule,
     LoginPageRoutingModule
   ],
   declarations: [LoginPage]

src/app/auth/login/login.page.html

@@ -2,9 +2,71 @@
     <ion-toolbar>
       <ion-title>Awado</ion-title>
     </ion-toolbar>
+  </ion-header>
+  
+  <ion-content>
+          
+            <form [formGroup]="angForm" novalidate>
+                <ion-grid>
+                    <ion-row justify-content-center>
+                      <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
+                <div padding>
+                    <img src="../../../assets/images/bike2gologo.png">
+                  </div>
+                  <div class="ion-text">
+                      <h3>Login</h3>
+                     
+                    </div>
+                    
+              <ion-item ><ion-input type="text" formControlName="username" placeholder="Enter First Name"></ion-input></ion-item>
+                <div
+                  *ngIf="angForm.controls['username'].invalid && (angForm.controls['username'].dirty || angForm.controls['username'].touched)"
+                  class="alert-danger">
+                  <div *ngIf="angForm.controls['username'].errors.required">
+                    First Name is required.
+                  </div>
+                </div>
+                
+               
+  
+                <ion-item ><ion-input type="password" formControlName="password" placeholder="Password"></ion-input></ion-item>
+                
+                <div
+                  *ngIf="angForm.controls['password'].invalid && (angForm.controls['password'].dirty || angForm.controls['password'].touched)"
+                  class="alert-danger">
+                  <div *ngIf="angForm.controls['password'].errors.required">
+                    Password is required.
+                  </div>
+                </div>
+                
+            
+            <div id="correctCredentialsmsg" padding *ngIf="correctCredentials">
+              Wrong Credentials !
+            </div>
+  
+            <div padding>
+                <ion-button [disabled]="angForm.pristine || angForm.invalid" size="large" expand="block" (click)="login()">Login</ion-button>
+              </div>
+              <div padding>
+                <ion-button size="large" expand="block" (click)="register()">Click here to Register</ion-button>
+              </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </form>
+  </ion-content>
+
+
+
+
+<!-- <ion-header>
+  <ion-toolbar>
+    <ion-title>Awado</ion-title>
+  </ion-toolbar>
 </ion-header>
 
 <ion-content>
+    <form [formGroup]="angForm" novalidate>
   <ion-grid>
     <ion-row justify-content-center>
       <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
@@ -15,14 +77,26 @@
             <h3>Login</h3>
            
           </div>
-        <div padding>
-          <ion-item>
-            <ion-input type="text" [(ngModel)]="username" placeholder="Username"></ion-input>
-          </ion-item>
          
-          <ion-item>
-            <ion-input type="password" [(ngModel)]="password" placeholder="Password"></ion-input>
+          
+    <ion-item ><ion-input type="text" formControlName="username" placeholder="Enter First Name"></ion-input></ion-item>
+      <div
+        *ngIf="angForm.controls['username'].invalid && (angForm.controls['username'].dirty || angForm.controls['username'].touched)"
+        class="alert-danger">
+        <div *ngIf="angForm.controls['username'].errors.required">
+          First Name is required.
+        </div>
+      </div>
+      <ion-item >
+          <ion-input type="text" formControlName="password" placeholder="Enter Last Name"></ion-input>
       </ion-item>
+      
+      <div
+        *ngIf="angForm.controls['password'].invalid && (angForm.controls['password'].dirty || angForm.controls['password'].touched)"
+        class="alert-danger">
+        <div *ngIf="angForm.controls['password'].errors.required">
+          Last Name is required.
+        </div>
       </div>
 
         <div id="correctCredentialsmsg" padding *ngIf="correctCredentials"> 
@@ -38,4 +112,5 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-</ion-content>
+</form>
\ No newline at end of file
+</ion-content> -->
\ No newline at end of file

src/app/auth/login/login.page.scss

@@ -10,3 +10,6 @@ ion-item {
 .ion-text{
     text-align: center;
   }
+  .alert-danger{
+    color: red;
+  }
\ No newline at end of file

src/app/auth/login/login.page.ts

@@ -6,13 +6,14 @@ import { HttpClient } from '@angular/common/http';
 
 import { RestService } from '../../rest.service';
 import { UserService } from 'src/app/services/user.service';
-
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 @Component({
   selector: 'app-login',
   templateUrl: './login.page.html',
   styleUrls: ['./login.page.scss'],
 })
 export class LoginPage implements OnInit {
+  public angForm: FormGroup;
   username = "";
   password = "";
   //username = "";
@@ -20,19 +21,33 @@ export class LoginPage implements OnInit {
   correctCredentials = false;
   loginApi: Observable<any>;
 
-  constructor(private router: Router, public httpClient: HttpClient, public restService: RestService,public userService: UserService) {
-
+  constructor(private router: Router, 
+    public httpClient: HttpClient, 
+    public restService: RestService,
+    public userService: UserService,
+    private fb: FormBuilder) {
+      this.createForm();
   }
 
   ngOnInit() {
   }
 
+  createForm() {
+    this.angForm = this.fb.group({
+      username: ['',[ Validators.required ]],
        
+       password: ['', [Validators.required,Validators.minLength(4) ]],
+      });
+    }
     login() {
+      
     this.loginApiCall();
   }
 
   loginApiCall() {
+    if (this.angForm.invalid) {
+      return;
+  }
     this.loginApi = this.httpClient.post('http://193.196.52.237:8081/authenticate', {
       "email": this.username,
       "password": this.password