<input [formControl]="control" [type]="type"
  class="block w-full py-1.5 px-3 text-gray-200 border border-gray-400 transition
    duration-500 focus:outline-none rounded bg-transparent focus:border-indigo-400"
  [placeholder]="placeholder" [mask]="format" 
  [dropSpecialCharacters]="false" />
<ng-container *ngIf="control.touched && control.dirty">
  <p class="text-red-400" *ngIf="control.errors?.pattern">
    Passwords must be at least 8 characters long, have 1
    uppercase letter, 1 lowercase letter, and 1 number.
  </p>
  <p *ngIf="control.errors?.required"
    class="text-red-400">
    Field is required
  </p>
  <p *ngIf="control.errors?.minlength"
    class="text-red-400">
    The value you inputted is 
    {{ control.errors?.minlength.actualLength }}
    characters long.
    It must be at least 
    {{ control.errors?.minlength.requiredLength }}
    characters long.
  </p>
  <p *ngIf="control.errors?.email" class="text-red-400">
    You must enter a valid email.
  </p>
  <p *ngIf="control.errors?.min" class="text-red-400">
    Value too low.
  </p>
  <p *ngIf="control.errors?.max" class="text-red-400">
    Value too high.
  </p>
  <p *ngIf="control.errors?.noMatch" class="text-red-400">
    Passwords do not match.
  </p>
  <p *ngIf="control.errors?.emailTaken" class="text-red-400">
    Email taken. Please try another email.
  </p>
</ng-container>
