@if(abmListInput.label) {
    <mat-label [class.required]="isControlRequired()">{{abmListInput.label}}</mat-label>    
  }
<mat-form-field class="example-full-width custom-label-outside autocomplete-custom" appearance="outline" floatLabel="always">
    <input 
    type="text" 
    matInput [formControl]="formControl" 
    [placeholder]="abmListInput.placeholder ? abmListInput.placeholder : '' " 
    [matAutocomplete]="auto" class="form-control"/>
    
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        @for (option of abmListInputOptions | async; track option) {
        <mat-option [value]="option">{{ option.label }}</mat-option>
        }
    </mat-autocomplete> 
    <lucide-angular matPrefix color="#5D6F85" size="16" [img]="searchI" ></lucide-angular>
    @if (formControl.hasError('required')) {
        <mat-error
            > {{abmListInput.label ? abmListInput.label: 'Este campo'}} es <strong>requerido</strong></mat-error
        >
    }
    @if (formControl.hasError('invalidOption')) {
        <mat-error>Seleccione una opción <strong>válida</strong></mat-error>
      }
</mat-form-field>