Angular 4 无法绑定到“formGroup”，因为它不是“form”的已知属性答案

【问题标题】：Angular 4 Can't bind to 'formGroup' since it isn't a known property of 'form'Angular 4 无法绑定到“formGroup”，因为它不是“form”的已知属性
【发布时间】：2018-02-24 04:09:19
【问题描述】：

我是使用 Angular 4 的新手。我正在尝试在 Angular 4 中练习模型驱动形式，但它不断收到此错误。

模板解析错误：无法绑定到“formGroup”，因为它不是 “形式”的已知属性。 (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/AdsComponent.html@71:38 错误：模板解析错误：无法绑定到“formGroup”，因为它不是已知的 “形式”的属性。 (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)">

我尝试搜索有关如何解决的问题。大多数解决方案是在模块中导入 ReactiveFormsModule。这是我的component.ts中的代码

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

import { HttpClient, HttpErrorResponse } from '@angular/common/http';                                                                                                                                                           


@Component({
  templateUrl: 'ads.component.html'
})
export class AdsComponent {
    form;
    ngOnInit() {
        this.form = new FormGroup({
            ads_name: new FormControl("Hello Ads!")
        });
    } 

  constructor(
    private http: HttpClient
    ) {

   }

   onSubmit = function(user) {
        console.log(user);
   }

}

这是我的component.html中的代码

<form class="form-horizontal" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
   <div class="form-group row">
       <label class="col-md-3 form-control-label" for="ads_name">Ads Name</label>
       <div class="col-md-9">
           <input type="text" id="ads_name" name="ads_name" class="form-control" placeholder="Ads Name" formControlName="ads_name" ngModel>
       </div>
   </div>
</form>

这是我模块中的代码

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

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule
  ],

【问题讨论】：

你的AdsComponent 在哪个模块？
我的组件文件夹中有一个单独的组件模块，在我的视图文件夹内的应用程序中分隔

标签： javascript html angular typescript

【解决方案1】：

正如您的错误所述：

模板解析错误：无法绑定到“formGroup”，因为它不是 “形式”的已知属性。 (" ][formGroup] = "表格" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/AdsComponent.html@

我们可以假设您的AdsComponent 是ComponentsModule 声明的一部分，但您已在AppModule 中导入ReactiveFormsModule。因此，为了让 Angular 能够编译 AdsComponent 的模板，您应该：

1) 在ComponentsModule 中导入ReactiveFormsModule：

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

2) 或导入正在导出ReactiveFormModule的模块

@NgModule({
  exports: [
    ...
    ReactiveFormsModule
  ]
})
export class SharedModule {}

@NgModule({
  imports: [
    ...
    SharedModule
  ]
})
export class ComponentsModule {}

另见：

Angular 2 Use component from another module

【讨论】：

它解决了错误。但是还有另一个错误。这是 ControlContainer 的错误 No provider。但我会尝试查看您提供的链接
此错误与该答案无关。您在模板中做错了什么
我们可以在聊天室里聊天吗？如果您有空打扰，请见谅。
尝试复制此代码plnkr.co/edit/AKwwpmYp7liF6ADhBjpB?p=preview
我已经试过了。顺便说一句，在我的视图文件夹中，我有一个单独的组件文件夹，在该文件夹中，我有每个控制器的每个组件，并且我放置了 components.module，用于导出反应式表单模块并使用您上面提供的共享模块导入它。现在我得到了这个错误。错误错误：未捕获（承诺中）：错误：模块'ComponentsModule'声明的意外值'FormGroup'。请添加@Pipe/@Directive/@Component 注解。对此感到抱歉

【解决方案2】：

请将 ReactiveFormsModule 声明为测试模块的一部分。

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [ReactiveFormsModule],
        declarations: [YourComponent, ...],
        providers: [...]
    });
});

【讨论】：

【解决方案3】：

显然有多种解决方案。这对我有用。在app.module.ts中导入ReactiveFormsModule

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

【讨论】：