Angular 2 RC.5 无法绑定到“formGroup”，因为它不是“form”的已知属性 [重复]答案

【问题标题】：Angular 2 RC.5 Can't bind to 'formGroup' since it isn't a known property of 'form' [duplicate]Angular 2 RC.5 无法绑定到“formGroup”，因为它不是“form”的已知属性 [重复]
【发布时间】：2016-11-23 20:11:05
【问题描述】：

我有一个错误

Can't bind to 'formGroup' since it isn't a known property of 'form'

将项目更新到 angular2 RC.5 后

app.module.ts:

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    DeprecatedFormsModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http]
    }),
    ConfigurationDevicesModule,
    ConfigurationEditModule,
    ControlModule,
    ResourceEditModule,
    UniWebControlInfoModule,
    routing
],
bootstrap: [ AppComponent ]
})

export class AppModule {

}

myComponent.module.ts

@NgModule({
declarations: [
    ConfigurationDevicesComponent
],
imports: [
    BrowserModule,
    TranslateModule
],
exports: [
    ConfigurationDevicesComponent
]
})

export class ConfigurationDevicesModule {

}

模板html示例：

<form [formGroup]="selectBackground">
                        <div *ngIf="backgrounds" class="form-group">
                            <h5>{{ 'CONFIGURATION_DEVICES.ALL_BACKGROUNDS' | translate }}</h5>
                            <select formControlName="selectBackgroundId">
                                <option *ngFor="let background of backgrounds" [value]="background.id">{{ 'CONFIGURATION_DEVICES.ID' | translate }} {{ background.id }} {{ 'CONFIGURATION_DEVICES.NAME' | translate }} {{ background.name }}</option>    
                            </select>
                        </div>
                    </form>

在 Angular 2 RC4 中，formGroup 工作正常。

我尝试同时导入 DeprecatedFormsModule 和 DFormsModule ，问题是一样的。在官方文档 Angular 现在我找不到任何关于 formGroup 或再次改变构建表单的方式？

【问题讨论】：

selectBackground 应该是字符串还是属性？
您使用DeprecatedFormsModule是故意的吗？
this.selectBackground = new FormGroup({ selectBackgroundId: this.selectBackgroundId });
不，我开始测试 DeprecatedFormsModule 因为 formModel 没有带来结果，我愿意接受任何解决方案
改用ReactiveFormsModule。

标签： forms angular typescript

【解决方案1】：

更新

ReactiveFormsModule需要添加到imports

 @NgModule({
   imports: [BrowserModule, FormsModule, ReactiveFormsModule], // <<<===
   ...
 })

原创

使用ReactiveFormsModule 而不是DeprecatedFormsModule。

要能够将ngModel 与formControlName 一起使用，您需要导入FormsModule 和 ReactiveFormsModule

【讨论】：

【解决方案2】：

您需要将 REACTIVE_FORM_DIRECTIVES 从 @angular/forms 导入到您的组件中，并将其添加为指令 (directives: [REACTIVE_FORM_DIRECTIVES])
您需要将 FormsModule 从 @angular/forms 导入到您的 NgModule。

【讨论】：