@if(filter.label) {
    <mat-label [class.required]="isControlRequired()">{{filter.label}}</mat-label>    
}

<mat-form-field class="example-full-width custom-label-outside autocomplete-custom" [class.multiple-errors]="validateError().length > 1" appearance="outline" floatLabel="always">
    <input 
    type="text" 
    class="form-control"
    matInput [formControl]="filterForm" 
    [placeholder]="filter.placeholder ? filter.placeholder : '' " 
    [matAutocomplete]="auto" />
    
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        @for (option of filteredOptions | async; track option) {
        <mat-option [value]="option">{{ option.label }}</mat-option>
        }
    </mat-autocomplete> 
    <lucide-angular matPrefix color="#5D6F85" size="16" [img]="searchI" ></lucide-angular>   
    @for (error of validateError(); track error) {
      <mat-error>
        {{error}}
      </mat-error>
    }
      <!-- errors = [{
        errorValidator: { required: true },
        errorDescription: 'Mensaje error',
      }]; -->
</mat-form-field>