`mat-form-field` 必须包含一个`MatFormFieldControl`

修复mat-form-field ,必须包含一个MatFormFieldControl 的错误

如果你使用Angular材料模块,你可能在使用MatFormFieldModule 时遇到了mat-form-field must contain a MatFormFieldControl 错误。

这个错误发生在你错过了给你的表单字段添加一个表单字段控件。

##什么是表单字段控制?

本机元素,如 <input><textarea>,放在mat-form-field ,作为表单字段控件。

如果你的mat-form-field 包含一个 <input><textarea>元素,请确保你已经添加了matInput 指令,并且导入了MatInputModule ,否则你的应用程序会出现mat-form-field must contain a MatFormFieldControl 错误。

其他可以作为表单字段控制的组件包括 <mat-select>, <mat-chip-list>以及你所创建的任何自定义表单字段控件。

##修复mat-form-field must contain a MatFormFieldControl 错误。

为了解决这个错误,请在必要的模块内添加MatInputModuleMatFormFieldModule ,或者添加app.module.ts

或者像Angular material tutorial中解释的那样,将所有材料模块添加到一个公共模块中,并将其添加到app.module.ts 文件中,这样我们就可以在整个应用程序中使用它们。

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

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

接下来确保你已经将matInput 指令添加到mat-form-field 控件中。

<mat-form-field appearance="fill">
  <mat-label>Input</mat-label>
  <input placeholder="Name">
</mat-form-field>

上面的代码出现了错误,因为我们没有添加matInput 指令。

<mat-form-field appearance="fill">
  <mat-label>Input</mat-label>
  <input matInput placeholder="Name">
</mat-form-field>

matInput 是区分大小写的

因此,如果你在matInput 中有拼写错误,或在MatInput 中有大写字母( ),或在matInput 中有小写字母(matinput),你仍然会遇到这个错误。

<mat-form-field appearance="fill">
  <mat-label>Input</mat-label>
  <input matinput placeholder="Name">
</mat-form-field>

##mat-form-field 控制输入不应包含*ngIf

如果你在mat-form-field控件上使用*ngIf ,即。 <input>标签,你会得到mat-form-field must contain a MatFormFieldControl 的错误。

下面的代码将无法工作。

<mat-form-field>
  <mat-label>Input</mat-label>
  <input matInput *ngIf="condition"/>
</mat-form-field>

相反,你应该在mat-form-field 元素上使用*ngIf

<mat-form-field *ngIf="condition">
  <mat-label>Input</mat-label>
  <input matInput />
</mat-form-field>

##摘要

要修复mat-form-field must contain a MatFormFieldControl 错误,请按照以下步骤进行

1.导入MatInputModuleMatFormFieldModule 2.在mat-form-field 控件中添加matInput 指令。即inputtextarea 3.检查matInput 的拼写。 4.不要在mat-form-field 控件上使用*ngIf ,而是在mat-form-field 元素上使用。

Liked this post? Subscribe
Avatar
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.