您可能忘记导入MatInputModule

我有这个问题。我在我的主模块中导入了MatFormFieldModule，但忘记将MatInputModule添加到imports数组中，如下所示:

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

更多信息请点击这里。

不幸的是，我不能只是评论一些已经很好的答案，因为我还没有SO点，然而，有3个关键模块，你需要确保你导入到你的组件的父模块，除了你必须直接导入到你的组件。我想简单地和大家分享一下，并强调一下他们的工作。

MatInputModule MatFormFieldModule ReactiveFormsModule

前两个是针对Angular Material的。很多刚接触Angular Material的人会本能地遇到其中一个，但没有意识到构建表单需要两者兼而有之。

那么它们之间有什么区别呢?

MatFormFieldModule包含了Angular Material中所有可用的不同类型的表单字段。这是一个更高级的模块一般的表单字段，而MatInputModule是专门为“输入”字段类型，而不是选择框，单选按钮等。

上面列表中的第三项是Angular的响应式表单模块。响应式表单模块负责大量Angular的底层工作。如果你打算使用Angular，我强烈建议你花点时间阅读Angular Docs。他们有你所有的答案。构建应用程序很少不涉及表单，而且通常情况下，应用程序将涉及响应式表单。因此，请花点时间阅读这两页。

Angular Docs:响应式表单

Angular Docs:响应式表单模块

第一个文档“响应式表单”将是你入门时最有力的武器，第二个文档将是你进入更高级的Angular响应式表单应用时最有力的武器。

请记住，这些需要直接导入到组件的模块中，而不是导入到正在使用它们的组件中。如果我没记错的话，在Angular 2中，我们在主app模块中导入了整个Angular Material模块集，然后直接在每个组件中导入了我们需要的内容。目前的方法在我看来要高效得多，因为如果我们只使用其中的几个模块，我们就可以保证导入整个Angular Material模块集。

我希望这篇文章能让你对Angular Material的构建形式有更多的了解。

问题1:MatInputModule未导入

在模块中导入MatInputModule和MatFormFieldModule，即app.module.ts

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

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

问题2:matInput -拼写错误/忘记添加

一定要添加matInput，它是区分大小写的。

<mat-form-field>
    <input matInput type="text" />
</mat-form-field>

问题3:无效的*ngIf放置

检查input标签上是否有任何条件在任何情况下都会为假，因为mat-form-field会在其中查找matInput。相反，把*ngIf放在mat-form-field标签上。

<mat-form-field>
   <input matInput *ngIf="someCondition"> // don't add condition here, else add in mat-form-field tag
</mat-form-field>

感谢@William Herrmann指出了这个问题#3

问题4:编译器仍然给出错误

如果angular编译器在修复上述问题后仍然报错，那么你必须尝试重新启动应用程序。

ng serve

新更新的MatInput模块导入是:

import {MatInputModule} from '@angular/material/input';

根据Angular Materials API

在我的例子中，它是TranslocoService服务，它可能会打乱init之后的初始化。

我的代码是这样的:

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        *transloco="let t"
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        placeholder="{{t('customer.management.customers.search.customer.name')}}">
</mat-form-field>

我把它改成了这样。

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        [placeholder]="searchBarPlaceHolder">
</mat-form-field>

占位符值来自组件中的一个字段。 经过这种修改，错误就消失了。如果你正在使用transloco，你可以试试这个。