为<mat-select>添加form control时出现ng: No provider for ngControl错误

我之前在Angular 5.x版本里也遇到过一模一样的问题！这个错误的核心原因几乎都是没有正确导入响应式表单模块导致的，结合你的版本（Angular 5.2.8 + Material 5.2.4），给你几个必查的解决步骤：

1. 确保导入ReactiveFormsModule到对应模块 #

在Angular 5中，formControl指令属于响应式表单模块，必须显式导入才能使用，否则Angular找不到ngControl的提供者。

打开你的模块文件（比如app.module.ts或者组件所在的feature module），添加以下代码：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已有的导入...
    ReactiveFormsModule, // 必须添加这一行！
    MatSelectModule // 确保MatSelectModule也已导入
  ]
})
export class YourModuleName { }

2. 检查组件中FormControl实例的定义 #

你在模板中用了[formControl]="formControlName"，这意味着组件类中必须存在一个名为formControlName的FormControl实例，别搞混formControl（绑定实例）和formControlName（绑定表单组内的控件名）这两个指令！

组件类示例：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 这里的变量名要和模板中的[formControl]绑定值一致
  formControlName = new FormControl(''); // 可以设置初始值，比如默认选中的选项值
}

3. 确认组件所在模块已导入ReactiveFormsModule #

如果你的组件在懒加载模块或者独立的feature module中，别只在根模块导入ReactiveFormsModule——Angular模块是隔离的，子模块不会自动继承父模块的导入，必须在当前模块也导入一次。

完整可运行示例 #

组件TS文件 #

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-mat-select-demo',
  template: `
    <mat-select [formControl]="selectedOptionControl" placeholder="选择选项">
      <mat-option value="option1">选项1</mat-option>
      <mat-option value="option2">选项2</mat-option>
      <mat-option value="option3">选项3</mat-option>
    </mat-select>
    <p>当前选中值: {{ selectedOptionControl.value }}</p>
  `
})
export class MatSelectDemoComponent {
  selectedOptionControl = new FormControl('option1'); // 设置默认选中选项1
}

模块文件 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';

import { AppComponent } from './app.component';
import { MatSelectDemoComponent } from './mat-select-demo.component';

@NgModule({
  declarations: [
    AppComponent,
    MatSelectDemoComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Material组件必须依赖动画模块
    ReactiveFormsModule,
    MatSelectModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果按照上面的步骤操作后还是报错，可以检查是否有拼写错误（比如变量名、模块导入名），或者是否在模板中混用了formControl和formGroup的绑定方式。

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