我没有看到这里描述的这种特定的失败机制，也没有看到任何关于public-api的引用。在这个问题的其他地方，所以添加它，以防它帮助其他人。

我在一个特性模块中使用响应式表单构建了一个组件。按照其他回答中描述的指导，我的模块构建没有问题，直到我试图通过public-api.ts导出组件。在这一点上，我开始得到熟悉的错误不能绑定到'formGroup'，因为它不是'形式'的已知属性，没有其他迹象可能是错误的。

这个问题发生在我身上，因为我忘记从NgModule中声明和导出这个组件。一旦我把它添加到那里，模块就开始重新构建。因此，在NgModule中尝试导出响应式表单组件时，要记住三件事:

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MyExportedComponent } from './components/my-exported.component';


@NgModule({
    declarations: [
        MyExportedComponent // this
  ],
    imports: [
        ReactiveFormsModule // this
    ], 
    exports: [
        MyExportedComponent // and this
    ],
    providers: [
        ]
})
export class MyModule { }

此时，Angular会在public-api.ts中使用这行代码:

export * from './lib/my-module/components/my-exported.component';

假设你的应用结构如下:

AnotherModule < your_form > AppModule

根据您的表单类型，在AnotherModule中导入ReactiveFormsModule或FormsModule。

确保在AppModule中导入了AnotherModule。

import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 并将其添加到app-module的imports数组中。ts文件。

在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文件中有任何错误，它不会抛出编译时错误。

Angular 4结合特性模块(如果你使用的是共享模块)也要求你导出ReactiveFormsModule才能工作。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { } 

简单的解决方案:

步骤1:导入ReactiveFormModule

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

步骤2:将“ReactiveFormsModule”添加到导入部分

imports: [

    ReactiveFormsModule
  ]

步骤3:重新启动应用程序并完成

例子:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }