<div class="form-floating mb-2">
  <input
    [ngClass]="(controlDir && controlDir.control && controlDir.control.touched) ? !controlDir.control.valid ? 'is-invalid' : 'is-valid' : null"
    [type]="type"
    (input)="onChange($event.target.value)"
    (blur)="onTouched()"
    class="form-control"
    id="{{label}}"
    #input
    placeholder="{{label}}"
    >
  <div *ngIf="controlDir && controlDir.control && controlDir.control.status === 'PENDING'" class="fa fa-spinner fa-spin loader"></div>
  <label for="{{label}}">{{label}}</label>
  <div class="text-warning" *ngIf="(controlDir && controlDir.control && !controlDir.control.valid && controlDir.control.touched)">
    <span *ngIf="controlDir.control.errors?.required">{{label}} is required</span>
    <span *ngIf="controlDir.control.errors?.pattern">Email is invalid</span>
  </div>
  <div class="text-warning d-block" *ngIf="(controlDir && controlDir.control && !controlDir.control.valid && controlDir.control.dirty)">
    <span *ngIf="controlDir.control.errors?.emailExists">Email Address is in use.</span>
  </div>
</div>
