register.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Register</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>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"><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-item>
              
              <div
                *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 
                *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
                class="alert-danger" ><ion-icon name="alert"></ion-icon>
                <div *ngIf="angForm.controls['email'].errors.required ">
                  Email 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)="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>
  </form>
</ion-content>