registration bug fixed and validations added

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

@@ -18,31 +18,33 @@
                    
                   </div>
                   
-            <ion-item ><ion-input type="text" formControlName="firstName" placeholder="Enter First Name"></ion-input></ion-item>
+                  <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">
+                *ngIf="angForm.controls['firstname'].invalid && (angForm.controls['firstname'].dirty || angForm.controls['firstname'].touched)"
+                class="alert-danger"><ion-icon name="alert"></ion-icon>
                 <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-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">
+                *ngIf="angForm.controls['lastname'].invalid && (angForm.controls['lastname'].dirty || angForm.controls['lastname'].touched)"
+                class="alert-danger"><ion-icon name="alert"></ion-icon>
                 <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
+              <div 
                 *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
-                class="alert-danger">
-                <div *ngIf="angForm.controls['email'].errors.required">
+                class="alert-danger" ><ion-icon name="alert"></ion-icon>
+                <div *ngIf="angForm.controls['email'].errors.required ">
                   Email is required.
                 </div>
               </div>
@@ -53,6 +55,7 @@
                 *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>
@@ -65,6 +68,9 @@
           <div padding>
             <ion-button [disabled]="angForm.pristine || angForm.invalid" size="large" expand="block" (click)="submitRegister()">Register</ion-button>
           </div>
+          <div padding>
+            <ion-button  size="large" expand="block" (click)="login()">Login</ion-button>
+          </div>
         </ion-col>
       </ion-row>
     </ion-grid>

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

 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { RestService } from 'src/app/rest.service';
 import { ToastService } from '../../services/toast.service';
 import { Router } from '@angular/router';
@@ -16,11 +16,8 @@ export class RegisterPage implements OnInit {
   registerApi: Observable<any>;
  
   correctCredentials: boolean;
-  email: "";
-  password: "";
-  lastName: "";
-  firstName: "";
-  
+
+
   constructor(private router: Router, 
     public httpClient: HttpClient, 
     public restService: RestService,
@@ -34,10 +31,11 @@ export class RegisterPage implements OnInit {
   }
   createForm() {
     this.angForm = this.fb.group({
-       firstName: ['',[ Validators.required ]],
-       lastName: ['', [Validators.required ]],
-       email: ['',[ Validators.required, Validators.email]],
-       password: ['', [Validators.required,Validators.minLength(4) ]],
+       
+       email: ['',[ Validators.required, Validators.email,Validators.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/)]],
+       password: ['', [Validators.required ]],
+       firstname: ['',[ Validators.required ]],
+       lastname: ['', [Validators.required ]],
        
  
    
@@ -48,13 +46,9 @@ export class RegisterPage implements OnInit {
     if (this.angForm.invalid) {
       return;
   }
-
-    this.registerApi = this.httpClient.post('http://193.196.52.237:8081/register', {
-      "email": this.email,
-      "password": this.password,
-      "firstname": this.firstName,
-      "lastname": this.lastName
-    });
+  let Form = JSON.stringify(this.angForm.value);
+  const headers = new HttpHeaders().set("Content-Type", 'application/json');
+    this.registerApi = this.httpClient.post('http://193.196.52.237:8081/register', Form,{headers});
     this.registerApi
       .subscribe((data) => {
         console.log('my data: ', data);
@@ -68,4 +62,7 @@ export class RegisterPage implements OnInit {
         
       });
   }
+  login(){
+    this.router.navigateByUrl('/login');
+  }
 }