（Angular Material）mat-error 消息未显示在 mat-form-field 中

Question

我正在使用 Angular Material 对 mat-form-field 输入进行一些验证。问题是 mat-error 消息没有显示，输入字段周围的轮廓也没有显示。我知道使用反应式表单和 ngModel 的模板驱动方法之间存在差异。在我的设置中，我使用后者。我尝试过不同的方法，例如使用模板变量、使用 FormControl 等。

当 mat-error 元素位于 mat-form-field 元素内部时，并且当我检查输入字段时，我可以看到 mat-error 元素没有生成，就会发生这种情况。如果我将其移到 mat-form-field 元素之外，则会显示错误文本，但不会显示轮廓。

mat-form-field 元素周围没有我可以引用的表单元素。 mat-form-field 输入字段位于 mat-dialog 内。

<mat-dialog-content>
    <div class="select">
    <mat-form-field floatLabel="always">
          <input 
            type="text"
            (blur)="checkType()"
            [(ngModel)]="modelType"
            matInput
            placeholder="Enter type"
            [disabled]="false"
            required/>
          <mat-error *ngIf="typeExists">Type already exists!</mat-error>
        </mat-form-field>
    </div>
</mat-dialog-content>
    

组件.ts

typeExists: boolean = false;
checkType()
  {
    //Code that looks in a list to see if the entered value exists in it.
    //It just sets a boolean value for typeExists, which is used to show the mat-error message

    this.typeExists = existsInList1;
  }

我尝试过使用这样的模板变量，但没有成功：

<mat-dialog-content>
    <div class="select">
    <mat-form-field floatLabel="always">
          <input 
            type="text"
            (blur)="checkType()"
            [(ngModel)]="modelType"
            #typeInput="ngModel"
            matInput
            placeholder="Enter type"
            [disabled]="false"
            required/>
          <mat-error *ngIf="typeInput.dirty && typeExists">Type already exists!</mat-error>
        </mat-form-field>
    </div>
</mat-dialog-content>

当然，我不是唯一遇到这些问题的人，所以我希望有人可以帮忙。

Answer 1

确保您已添加以下导入。

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
...

...
@Component({
  selector: 'input-error-state-matcher-example',
  templateUrl: './input-error-state-matcher-example.html',
  styleUrl: './input-error-state-matcher-example.css',
  standalone: true,
  imports: [FormsModule, MatFormFieldModule, MatInputModule], // <- imports!
})
export class InputErrorStateMatcherExample {
  ...
}

还要确保您已将

provideAnimations

设置在

bootstrapApplication

级别或

app.module.ts

级别。

bootstrapApplication(InputErrorStateMatcherExample, {
  providers: [
    provideAnimations(),
    provideHttpClient(),
    importProvidersFrom(MatNativeDateModule)
  ]
}).catch(err => console.error(err));