ngControl [FormControl] Angular 6没有提供程序

Question

我正在学习Angular。虽然官方教程对我来说效果很好，但我对“反应式表单”的“世界好”一无所知。我正在关注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

我无法理解我做错了什么。任何帮助表示赞赏。

Answer 1

为了使这项工作有效，您必须将导入ReactiveFormsModule您的@NgModule，这正是ViewsModule您的问题所建议的。作为而不是的FormControl一部分公开。ReactiveFormsModuleFormsModule

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

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

Answer 2

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

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

moduleMetadata({
  imports: [ReactiveFormsModule]
})

Answer 3

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

Answer 4

对于 Angular 11，它应该是：

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

    @NgModule({
        imports: [
             FormsModule,
             ReactiveFormsModule      
        ]

Answer 5

导致此错误的可能原因有多种。

1. 进口ReactiveFormsModule

导入声明ReactiveFormsModule您的模块，即component

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

2. 初始化formControl

添加formControl到您的输入即

<input type="text" [formControl]="yourControl">