Added form validation in Registraion page

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { RestService } from './rest.service';
 import { ToastService } from './services/toast.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [AppComponent],
@@ -25,6 +26,8 @@ import { ToastService } from './services/toast.service';
     HttpClientModule,
     IonicModule.forRoot(),
     AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
     IonicStorageModule.forRoot()
   ],
   providers: [

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

@@ -11,7 +11,10 @@
         <div padding>
           <img src="../../../assets/images/bike2gologo.png">
         </div>
-
+        <div class="ion-text">
+            <h3>Login</h3>
+           
+          </div>
         <div padding>
           <ion-item>
             <ion-input type="text" [(ngModel)]="username" placeholder="Username"></ion-input>

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

@@ -6,4 +6,7 @@ ion-item {
 #correctCredentialsmsg{
     color:red;
     font-size: 14px;
-}
\ No newline at end of file
+}
+.ion-text{
+    text-align: center;
+  }
\ No newline at end of file

src/app/auth/register/register.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -8,11 +7,14 @@ import { RegisterPageRoutingModule } from './register-routing.module';
 
 import { RegisterPage } from './register.page';
 
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    ReactiveFormsModule,
     RegisterPageRoutingModule
   ],
   declarations: [RegisterPage]

src/app/auth/register/register.page.html

@@ -5,38 +5,68 @@
 </ion-header>
 
 <ion-content>
-  <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>
+        
+          <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>Registration</h3>
+                   
+                  </div>
+                  
+            <ion-item ><ion-input type="text" formControlName="firstName" placeholder="Enter First Name"></ion-input></ion-item>
+              <div
+                *ngIf="angForm.controls['firstName'].invalid && (angForm.controls['firstName'].dirty || angForm.controls['firstName'].touched)"
+                class="alert-danger">
+                <div *ngIf="angForm.controls['firstName'].errors.required">
+                  First Name is required.
+                </div>
+              </div>
+              <ion-item >
+                  <ion-input type="text" formControlName="lastName" placeholder="Enter Last Name"></ion-input>
+              </ion-item>
+              
+              <div
+                *ngIf="angForm.controls['lastName'].invalid && (angForm.controls['lastName'].dirty || angForm.controls['lastName'].touched)"
+                class="alert-danger">
+                <div *ngIf="angForm.controls['lastName'].errors.required">
+                  Last Name is required.
+                </div>
+              </div>
+              <ion-item ><ion-input type="text" formControlName="email" placeholder="Enter Email"></ion-input></ion-item>
+              
+              <div
+                *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
+                class="alert-danger">
+                <div *ngIf="angForm.controls['email'].errors.required">
+                  Email is required.
+                </div>
+              </div>
 
-        <div padding>
-          <ion-item>
-            <ion-input type="text" [(ngModel)]="firstName" placeholder="Enter First Name"></ion-input>
-          </ion-item>
-          <ion-item>
-            <ion-input type="text" [(ngModel)]="lastName" placeholder="Enter Last Name"></ion-input>
-          </ion-item>
-          <ion-item>
-            <ion-input type="text" [(ngModel)]="email" placeholder="Email"></ion-input>
-          </ion-item>
+              <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>
 
-
-          <ion-item>
-            <ion-input type="password" [(ngModel)]="password" placeholder="Password"></ion-input>
-          </ion-item>
-        </div>
-
-        <div id="correctCredentialsmsg" padding *ngIf="correctCredentials">
-          Wrong Credentials !
-        </div>
-
-        <div padding>
-          <ion-button size="large" expand="block" (click)="submitRegister()">Register</ion-button>
-        </div>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+          <div padding>
+            <ion-button [disabled]="angForm.pristine || angForm.invalid" size="large" expand="block" (click)="submitRegister()">Register</ion-button>
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </form>
 </ion-content>
\ No newline at end of file

src/app/auth/register/register.page.scss

+.alert-danger{
+    color: red;
+  }
+  ion-item {
+    border: solid 1px lightgray;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+.ion-text{
+  text-align: center;
+}

src/app/auth/register/register.page.ts

@@ -2,7 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { RestService } from 'src/app/rest.service';
+import { ToastService } from '../../services/toast.service';
 import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-register',
@@ -10,7 +12,7 @@ import { Router } from '@angular/router';
   styleUrls: ['./register.page.scss'],
 })
 export class RegisterPage implements OnInit {
- 
+  public angForm: FormGroup;
   registerApi: Observable<any>;
  
   correctCredentials: boolean;
@@ -18,11 +20,35 @@ export class RegisterPage implements OnInit {
   password: "";
   lastName: "";
   firstName: "";
-  constructor(private router: Router, public httpClient: HttpClient, public restService: RestService) { }
+  
+  constructor(private router: Router, 
+    public httpClient: HttpClient, 
+    public restService: RestService,
+    private toastService: ToastService,
+    private fb: FormBuilder) {
+      this.createForm();
+
+     }
 
   ngOnInit() {
+  }
+  createForm() {
+    this.angForm = this.fb.group({
+       firstName: ['',[ Validators.required ]],
+       lastName: ['', [Validators.required ]],
+       email: ['',[ Validators.required, Validators.email]],
+       password: ['', [Validators.required,Validators.minLength(4) ]],
+       
+ 
+   
+    });
+    
   }
   submitRegister() {
+    if (this.angForm.invalid) {
+      return;
+  }
+
     this.registerApi = this.httpClient.post('http://193.196.52.237:8081/register', {
       "email": this.email,
       "password": this.password,
@@ -33,10 +59,13 @@ export class RegisterPage implements OnInit {
       .subscribe((data) => {
         console.log('my data: ', data);
         this.restService.setToken(data.token);
+        this.toastService.showToast("Registration Successful!")
         this.router.navigateByUrl('/login');
+        
       }, (error) => {
         console.log(error);
-        this.correctCredentials = true;
+        this.toastService.showToast("Registration failed!")
+        
       });
   }
 }

src/app/feedback/feedback.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>feedback</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <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 padding>
+          <ion-item>
+            <ion-input type="text" [(ngModel)]="firstName" placeholder="Enter First Name"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-input type="text" [(ngModel)]="bikeId" placeholder="Bike id"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-input type="text" [(ngModel)]="message" placeholder="Enter your Feedback here!"></ion-input>
+          </ion-item>
+
+
+          <ion-item>
+            <ion-input type="password" [(ngModel)]="password" placeholder="Password"></ion-input>
+          </ion-item>
+        </div>
+
+        <div id="correctCredentialsmsg" padding *ngIf="correctCredentials">
+          Wrong Credentials !
+        </div>
+
+        <div padding>
+          <ion-button size="large" expand="block" (click)="submitRegister()">Register</ion-button>
+        </div>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>