register.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Ionic Notes</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Enter your details</ion-card-subtitle>
      <ion-card-title>Register</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <form
        class="form"
        [formGroup]="validations_form"
        (ngSubmit)="tryRegister(validations_form.value)"
      >
        <ion-label position="floating" color="primary">Name</ion-label>
        <ion-input type="text" formControlName="name" placeholder="Name">
        </ion-input>

        <ion-label position="floating" color="primary">Email</ion-label>
        <ion-input
          type="text"
          formControlName="email"
          placeholder="Email"
        ></ion-input>

        <div class="validation-errors">
          <ng-container *ngFor="let validation of validation_messages.email">
            <div
              class="error-message"
              *ngIf="validations_form.get('email').hasError(validation.type) &&
        (validations_form.get('email').dirty || validations_form.get('email').touched )"
            >
              {{validation.message}}
            </div>
          </ng-container>
        </div>

        <ion-label position="floating" color="primary"> Password </ion-label>
        <ion-input
          type="password"
          formControlName="password"
          placeholder="Password"
        ></ion-input>

        <div class="validation-errors">
          <ng-container *ngFor="let validation of validation_messages.password">
            <div
              class="error-message"
              *ngIf="validations_form.get('password').hasError(validation.type)
        && (validations_form.get('password').dirty || validations_form.get('password').touched)"
            >
              {{validation.message}}
            </div>
          </ng-container>
        </div>

        <ion-button
          class="submit-btn"
          type="submit"
          [disabled]="!validations_form.valid"
          >Register</ion-button
        >
        <label class="error-message">{{errorMessage}}</label>
        <label class="success-message">{{successMessage}}</label>
      </form>
      <p>Have an account? <a routerLink="/home">Login </a></p>
    </ion-card-content>
  </ion-card>
</ion-content>