<ng-container *ngIf="name">
  <form [formGroup]="formGrp">
    <input mdbInput type="text" [attr.id]="name" class="form-control" [attr.placeholder]="placeHolder"
      [formControlName]="name" />
    <ng-container *ngIf="control && (!hideError)">
      <div class="error-holder scrollbar-morpheus-den square horizontal-thin">
        <mdb-error class="align-position text-no-select"
          *ngIf="(control?.hasError('required') && formDir?.submitted) || (control?.invalid && (control?.dirty || control?.touched))">
          {{ 'Please enter a valid '+ name }}</mdb-error>
      </div>

      <!--uncomment this section if valid message is to be shown-->
      <!-- <mdb-success class="align-position" *ngIf="control.valid && (control.dirty || control.touched)">{{
      name + ' is Valid.'
    }}</mdb-success> -->
    </ng-container>
  </form>
</ng-container>

<ng-container *ngIf="error  && (!hideError)">
  <mdb-error class="align-position">{{ genericErrorMessage }}</mdb-error>
</ng-container>