Angular 13中mat-autocomplete无法选中选项，控制台报MatFormFieldControl错误

1. 修复控制台错误：mat-form-field must contain a MatFormFieldControl #

该错误源于未在组件所属模块中导入Angular Material必需的组件模块。Angular 13采用按需导入模式，需在对应NgModule（如AppModule或自定义共享模块）中添加以下导入项：

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 保留原有其他模块
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule
  ]
})
export class YourModuleName { }

• ReactiveFormsModule：使用FormControl必须导入该模块以启用响应式表单功能。
• MatFormFieldModule、MatInputModule：解决mat-form-field无法识别内部控件的问题。
• MatAutocompleteModule：确保自动完成组件正常运行。

2. 修复下拉选项选中后不显示的问题 #

此问题核心原因也是模块缺失，补全上述模块导入后，FormControl会自动同步选中值到输入框。若导入后仍有异常，可检查两点：

• 确认模板中[value]="option"绑定正确，你的代码中该绑定无问题。
• 确保组件类的myControl与模板[formControl]="myControl"对应一致，你的代码此处逻辑正确。

验证操作 #

1. 保存模块文件，重启Angular开发服务器（避免缓存干扰）。
2. 重新测试页面：控制台错误会消失，点击下拉选项后输入框将正常显示选中内容。

内容的提问来源于stack exchange，提问作者coloradoman