<form [formGroup]="formGrp" *ngIf="populationData?.length > 0">
  <div class="select-div">
    <select #selector class="browser-default scrollbar-morpheus-den square option-width thin" (focus)="onFocus($event)"
      (blur)="onBlur($event)" (change)="onChange($event)" [formControlName]="name">
      <option value="" disabled selected hidden>{{placeHolder}}</option>
      <option *ngFor="let d of populationData" [ngValue]="d">{{ d }}</option>
    </select>
  </div>
  <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 *ngIf="error  && (!hideError)">
  <div class="custom-error">{{ genericErrorMessage }}</div>
</ng-container>