<form [formGroup]="accessIdForm">
  <div [ngClass]="placeHolderMessage == 'Access id'? 'type-ahead--small' : 'type-ahead--large'">
    <mat-form-field class="type-ahead__form-field" appearance="outline">
    <mat-label class="type-ahead__label" matTooltip="{{name}}" matTooltipPosition="above">
      {{name || placeHolderMessage}}
    </mat-label>
    <!-- TEXT INPUT -->
    <input matInput
           type="text"
           placeholder="{{placeHolderMessage}}"
           formControlName="accessId"
           [required]="isRequired"
           [matAutocomplete]="auto"
           matTooltip="{{accessIdForm.controls['accessId'].value}}"
          class="type-ahead__input-field">
    <!-- ERROR MESSAGE -->
    <mat-error
      [ngClass]="placeHolderMessage == 'Access id' ? 'type-ahead__error--accessId' : 'type-ahead__error--general'"
      *ngIf="displayError && !accessIdForm.valid">
      Access id not valid
    </mat-error>
    <!-- AUTOCOMPLETE LIST -->
    <mat-autocomplete #auto>
      <mat-option class="type-ahead__form-options" *ngFor="let accessId of filteredAccessIds"
        [value]="accessId.accessId" matTooltip="{{accessId.accessId}} {{accessId.name}}">
        <small>{{accessId.accessId}}&nbsp;&nbsp;{{accessId.name}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  </div>
</form>

