如果你在mat-form-field中有一个正确的输入，但它有一个ngIf，这也会发生。例如:

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

在我的例子中，mat-chip-list应该只在其数据加载后才“出现”。但是，在执行验证时，mat-form-field会抱怨

mat-form-field必须包含MatFormFieldControl

为了修复它，控件必须在那里，所以我使用[hidden]:

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

Mosta为mat-form-field提出了一个替代方案:move *ngIf:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

我不小心从输入字段中删除了matInput指令，这导致了同样的错误。

eg.

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

固定的代码

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

每个人都解释了他是如何解决这个问题的，但没有一个答案解决了我的问题，当我发现在做这些答案中解释的所有事情之前，

你必须安装(添加)角材料到你的项目

ng add @angular/material

对我来说，这就是问题的原因。

不幸的是，我不能只是评论一些已经很好的答案，因为我还没有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的构建形式有更多的了解。

9加1。9 +材料

我注意到有3个错误会导致同样的错误:

确保你已经在app.module或模块中导入了MatFormFieldModule和MatInputModule。导入组件的t(嵌套模块的情况下) 当你包装材料按钮或复选框在垫形式领域。请参阅可以用mat-form-field封装的材料组件列表 当你没有在标签中包含matInput时。例如:<input matInput type="number" step="0.01" formControlName="price" />

如果上面所有主要的代码结构/配置答案都不能解决您的问题，那么还有一件事需要检查:确保您没有以某种方式使<input>标记失效。

例如，我收到了相同的mat-form-field必须包含一个MatFormFieldControl错误消息，在意外地将一个必需的属性放在自关闭斜杠/之后，这有效地使我的<input/>无效。换句话说，我这样做了(参见输入标签属性的末尾):

错误的:

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>

正确的:

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>

如果你犯了这个错误或其他使你的<input>无效的错误，那么你可以得到mat-form-field必须包含一个MatFormFieldControl错误。不管怎样，这只是调试时要注意的另一件事。