ngControl [FormControl] Angular 6 没有提供者答案

【问题标题】：no provider for ngControl [FormControl] Angular 6ngControl [FormControl] Angular 6 没有提供者
【发布时间】：2019-04-23 16:00:58
【问题描述】：

我正在学习 Angular。虽然官方教程对我来说效果很好，但我还是被 Reactive Forms 的“hello world”所困。我关注https://angular.io/guide/reactive-forms。我在另一个明智的工作项目中创建了一个新组件，以使用 ReactiveForm 创建一个输入文本框。模板html如下：

    <div>
        <label>
          Name:
          <input type="text" [formControl]="name">
        </label>
    </div>

组件类如下所示

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

@Component({
  selector: 'app-party-worker',
  templateUrl: './party-worker.component.html',
  styleUrls: ['./party-worker.component.scss']
})
export class PartyWorkerComponent implements OnInit {
  name = new FormControl('');
  constructor() { }
  ngOnInit() {
  }
}

浏览器中的错误是这样的。

Uncaught Error: Template parse errors:
No provider for NgControl ("
    <label>
      Name:
      [ERROR ->]<input type="text" [formControl]="name">
    </label>
  </div>"): ng:///ViewsModule/PartyWorkerComponent.html@3:6

是的，我已经导入了 ReactiveFormsModule。我的角度版本，如果被ng --version透露如下

Angular CLI: 7.0.5
Node: 11.1.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.5
@angular-devkit/core         7.0.5
@angular-devkit/schematics   7.0.5
@schematics/angular          7.0.5
@schematics/update           0.10.5
rxjs                         6.3.3
typescript                   3.1.6

我不明白我做错了什么。任何帮助表示赞赏。

【问题讨论】：

标签： angular

【解决方案1】：

对于 Angular 11，它应该是：

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

    @NgModule({
        imports: [
             FormsModule,
             ReactiveFormsModule      
        ]

【讨论】：

我的 .spec 文件中缺少 FormModule.... 这让我意识到我需要它和 ReactiveFormModule。
我可能错了，但据我了解，FormsModule 需要导入以支持 [(NgModel)] 而ReactiveFormsModule [formGroup]（和相关）输入

【解决方案2】：

我遇到了同样的问题，结果发现我有一个自定义表单控件，但在使用该控件时忘记指定 [(ngModel)] 或 [formControl]。

【讨论】：

【解决方案3】：

对于使用 Storybook.js 并看到此错误的任何人。不要忘记将上述内容也导入您的故事中。

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

moduleMetadata({
  imports: [ReactiveFormsModule]
})

【讨论】：

感谢您将Storybook.js 加入此答案，我不知道，但现在我知道了 :)
其实你也应该导入表单模块： import { FormsModule, ReactiveFormsModule } from '@angular/forms';然后也导入它

【解决方案4】：

很抱歉打扰了任何可能考虑过的人。原来，我的应用程序中有两个模块，AppModule 不是我的组件所在的位置！重要的模块中缺少 ReactiveFormsModule。添加了相同的内容并解决了问题。

【讨论】：

【解决方案5】：

要完成这项工作，您必须在您的@NgModule 中导入ReactiveFormsModule，这就是您的问题所暗示的ViewsModule。因为FormControl 是ReactiveFormsModule 的一部分，而不是FormsModule。

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

@NgModule({
  imports: [..., ReactiveFormsModule, ...],
  ...
})
export class ViewsModule {...}

【讨论】：

以重复为代价，让我声明我已经在应用程序模块中这样做了。从头开始就导入了 ReactiveFormsModule 和 FormModule。还玩了他们的命令。但无济于事。
PartyWorkerComponent 是您的app.module 的一部分吗？
PartyWorkerComponent 是ViewsModule 的一部分
那么ReactiveFormsModule应该添加到ViewsModule的imports数组中
从错误ng:///ViewsModule/PartyWorkerComponent.html@3:6可以看出