MatFormFieldControl：彻底解析这个错误

引言：为什么你的 Angular 表单会报错？

你是否遇到过这样的情况：正在用 Angular Material 编写一个漂亮的表单，一切看似完美，但浏览器控制台突然弹出消息：

mat-form-field must contain a MatFormFieldControl

或者，如果你使用的是 TypeScript 严格模式，可能会出现类似这样的提示：

Error: mat-form-field must contain a MatFormFieldControl. Did you forget to add a directive that implements MatFormFieldControl?

这是 Stack Overflow 上最常见的错误之一（有数千次浏览！），今天我们将彻底剖析它。你不仅会学到如何修复这个问题，还会了解它为什么会出现。更重要的是，如果标准的 MatInput 不适合你，你将学会如何为 Angular Material 创建自己的控件。

开始吧！🚀

什么是 MatFormFieldControl，为什么需要它？

在解决错误之前，让我们先了解 Angular Material 的结构。mat-form-field 是一个容器，用于添加 Material Design 样式（标签、下划线、提示、错误）。但它本身不显示任何内容。它需要一个“子元素”——一个实现了 MatFormFieldControl 接口的指令或组件。

这个接口（或抽象类）描述了控件如何与表单交互：如何获取值、如何显示错误、如何处理焦点。标准的实现是 MatInput。如果你编写：

<mat-form-field>\n  <input matInput placeholder="姓名">\n</mat-form-field>

——那么 matInput 指令会自动实现 MatFormFieldControl。

当 Angular 找不到任何具有此实现的子元素时，就会发生错误。例如：

<mat-form-field>\n  <input placeholder="姓名"> <!-- 没有 matInput！ -->\n</mat-form-field>

或者当你尝试使用一个未连接接口的自定义组件时。

错误的典型原因（以及如何修复）

1. 忘记添加 matInput 指令

这是最直接的原因。你只是在 <input> 元素上没有指定 matInput。

错误示例：

<mat-form-field>\n  <input placeholder="邮箱">\n</mat-form-field>

正确示例：

<mat-form-field>\n  <input matInput placeholder="邮箱">\n</mat-form-field>

同时检查你是否已在模块中导入 MatInputModule：

import { MatInputModule } from '@angular/material/input';\n\n@NgModule({\n  imports: [MatInputModule]\n})\nexport class AppModule { }

2. 使用了错误的 HTML 元素

MatInput 仅适用于 <input> 和 <textarea>。如果你尝试将普通的 <div> 或 <select>（没有 mat-select）包裹在 mat-form-field 中，就会收到错误。

错误示例：

<mat-form-field>\n  <div>一些内容</div>\n</mat-form-field>

正确示例： 使用相应的 Material 组件：

<mat-form-field>\n  <mat-select placeholder="城市">\n    <mat-option value="1">莫斯科</mat-option>\n  </mat-select>\n</mat-form-field>

对于 mat-select，需要导入 MatSelectModule。

3. 自定义组件未实现 MatFormFieldControl

这是一个更复杂的情况。假设你创建了自己的日期输入或评分组件。Angular Material 不知道它。你需要明确地“教会”它。