Mat-Error在Mat-autocomplete中没有显示垫子和垫子场。

Question

我的目的是在用户未放置值时显示错误。我知道上面的示例没有太多的意义，但是如果程序必须显示，我也不会阅读错误。代码是：

<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>

在我的模块中，我导入：

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

Mat-Error显示也没有条件。任何人都可以帮助我吗？我没有阅读错误消息“最小长度4”

Answer 1

我建议不要为 ngmodel 与您在模板中使用的另一个属性相同的名称提供模板变量。我将首先更改该名称，然后仅在需要时显示错误。

如果您希望一个字段是强制性的，则只需要在其中添加必需的属性即可。

<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

对我来说，解决方案是在自动完成的搜索控件上使用标记。

<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>

因此，在控制器中的功能中，我可以做类似的操作

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

，这将为我显示错误：

添加标记对它起作用至关重要。