如果遇到这类问题，我们必须关注三个要点。

导入ReactiveFormsModule, FormsModule在任何共享或应用模块。 如果创建了共享模块，则将其导入正在使用表单组和的模块中 检查该组件是否已插入 像这样声明:[ProjectComponent]。

对于浏览这些线程的人来说。在我的情况下，我有一个共享模块，我只导出FormsModule和ReactiveFormsModule，忘记导入它。这导致了一个奇怪的错误，即表单组在子组件中不起作用。希望这能帮助那些摸不着头脑的人。

不能绑定到'formGroup'因为它不是'form'的已知属性

意味着你尝试使用angular ([prop])绑定一个属性，但angular不能找到他知道的任何元素(在这种情况下的形式)。

这可能是由于没有使用正确的模块(在某些地方缺少导入)，有时只是导致打字错误，如:

[formsGroup]， form后面加s

在app.module.ts中导入并注册ReactiveFormsModule。

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

请确保.ts和.html文件中的拼写正确。 xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

xxx.html文件-

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

我错误地写了[FormGroup]而不是[FormGroup]。在.html中检查拼写是否正确。如果.html文件中有任何错误，它不会抛出编译时错误。

转到:app.module.ts 进口:[ … ReactiveFormsModule ］ import {ReactiveFormsModule} from '@angular/forms'; 它应该是这样的:

从'@angular/forms'中导入{ReactiveFormsModule}; @NgModule ({ 声明:[ ]， 进口:[ ReactiveFormsModule ]， 供应商:[], 引导(AppComponent): }) 导出类AppModule {}

注意:小心加载器和最小化(Rails env.):

在看到这个错误并尝试了每个解决方案之后，我意识到我的html加载器有问题。

我已经设置了我的Rails环境，为我的组件成功导入HTML路径与这个加载器(config/loaders/ HTML .js.):

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

经过几个小时的努力和无数的ReactiveFormsModule导入，我看到我的formGroup是小字母:formGroup。

这让我看到了加载器，它在最小化上减少了我的HTML。

在改变了选项之后，一切都正常了，我又可以回去哭了。

我知道这不是问题的答案，但对于未来的Rails访问者(和其他使用自定义加载器的人)，我认为这可能会有帮助。