ERROR 错误：NG0201：在 NodeInjector 中找不到 NgControl 的提供程序答案

【问题标题】：ERROR Error: NG0201: No provider for NgControl found in NodeInjectorERROR 错误：NG0201：在 NodeInjector 中找不到 NgControl 的提供程序
【发布时间】：2022-04-20 13:05:34
【问题描述】：

我完全没有想法。我想使用 Reactive Forms Module，所以我在 app.module.ts 中导入了它，就像

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

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...
    ReactiveFormsModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

在我定义的组件中：

import { Component, OnInit} from "@angular/core";

import { FormControl, FormGroup } from '@angular/forms';

@Component({
    ...
})

export class SearchComponent implements OnInit{
    //Variablen
    form: FormGroup;
    
    //Konstruktor
    constructor(){}

    //Methoden
    ngOnInit(){
        this.form = new FormGroup({
            'title': new FormControl(null)
        });
    }

    showValue(){
        console.log(this.form.get('title'));
    }
}

编译运行良好，但在显示时会崩溃，并在浏览器控制台中显示以下错误： “core.js:6156 ERROR 错误：NG0201：在 NodeInjector 中找不到 NgControl 的提供程序。”

你们中有人知道出了什么问题吗？

如果有任何提示，我将不胜感激。

非常感谢！

【问题讨论】：

据我所知，不推荐使用new FormGroup(...)。注入FormBuilder 的实例，然后使用this.fb.group({ control: new FormControl(null)})。也许可以帮助你。

标签： angular typescript web-applications

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

刚刚发现我的（同样的）错误，你必须在“本地”模块中导入ReactiveFormsModule... 在您的情况下，它必须是“search-component.module.ts”

【讨论】：

【解决方案3】：

在 app.module.ts 中也导入 FormsModule

【讨论】：

我试了一下，但没有解决问题。我在 Angular Cli 11.1.1 上。在一个类似的项目中，我在 9.1.12 上，一切正常。可能是新版本的问题？
这是导入问题。您的 SearchComponent 未在 app.module.ts 中声明。在声明 SearchComponent 的地方导入 FormsModule 和 ReactiveFormsModule。
它没有在上面列出你是对的，但是 SeachComponent 在那里声明为 ... 。问题是，表单声明和初始化没有找到 formControlName。如果我留下它没有名字，它会引发错误但可以工作。如果我尝试在 HTML 中设置 formControlName="title" 它会崩溃，并出现本文标题中给出的错误代码

【解决方案4】：

您可以尝试在 html 的表单容器中添加 *ngIf="!isLoading"。在 de .ts 文件中添加 isLoading = true;在 var 声明的顶部，然后在创建表单后，isLoading = false; 问候。

【讨论】：

【解决方案5】：

在当前模块示例（login.module.ts 或任何其他模块）中也导入ReactiveFormsModule，而不是在app.module.ts 中：

【讨论】：

【解决方案6】：

把它放到你的本地模块中。

import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [],
  imports: [
    FormsModule
  ]
})
export class ... {}

【讨论】：