mat-error doesn't show in mat-autocomplete and in mat-form-field

Question

my purpose is show an error when the user doesn't put a value. I know that above example doesn't have a lot of sense, but I don't read the error also if the programs must show. the code is this:

<form (ngSubmit)="ricerca()" #formCampiRicerca="ngForm">

    <mat-form-field appearance="legacy" class="col-sm-12 col-lg-6 w-100 p-3">
        <mat-label>{{ "APPLICATION......" | }}</mat-label>
    
        <input type="text" [(ngModel)]="flux" class="modInput" #flux="ngModel">
    
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
            <ng-container *ngIf="existsFlux()">
                ...
            </ng-container>
    
        </mat-autocomplete>
        // here the error doesn't show also it doesn't have a filed
        <mat-error>minlength 4</mat-error>
    
    </mat-form-field>
</form>

In my module I import:

 CommonModule,
    RicercaCircolariRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatAutocompleteModule,
    MatDialogModule,

The mat-error doesn't show also doesn't have condition. Anyone can help me?I don't read the error message "minlength 4"

Answer 1

I recommend not giving your template variable for the NgModel the same name as another property that you use in the template. I would start by changing that name first, then show the error only when needed.

If you want a field to be mandatory, you just need to add the required attribute to it.

<form (ngSubmit)="ricerca()" #formCampiRicerca="ngForm">
    <mat-form-field appearance="legacy" class="col-sm-12 col-lg-6 w-100 p-3">
        <mat-label>{{ "APPLICATION......" | }}</mat-label>
        <input type="text" required [(ngModel)]="flux" class="modInput" #fluxModel="ngModel">

        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
            <ng-container *ngIf="existsFlux()">
                ...
            </ng-container>
    
        </mat-autocomplete>
        <mat-error *ngIf="fluxModel.control.hasError('required')">
          This field is required
        </mat-error>
    </mat-form-field>
</form>

Answer 2

For me the solution was to use markAsTouched on the search control in the autocomplete.

<mat-form-field appearance="outline">
    <input type="text"
      [placeholder]="placeholder"
      aria-label="Number"
      matInput
      #autoInput
      [formControl]="searchCtrl"
      [matChipInputFor]="chipList"
      [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="select($event)">

    ....

    @if (searchCtrl.hasError('test')) {
      <mat-error>This field is required</mat-error>
    }
</mat-form-field>

So in a function in the controller, I can do something like

this.searchCtrl.markAsTouched();
this.searchCtrl.setErrors({test:true })

and it will show the error for me:

Adding markAsTouched was pivotal for it to work.