Angular 4無法綁定到'formGroup'，因為它不是'form'的已知屬性

Question

我是使用Angular 4的新手。我正在嘗試在角度4中練習模型驅動的表單，但它不斷得到這個錯誤。

模板解析錯誤：無法綁定到'formGroup'，因為它不是'form'的已知屬性。 （“] [formGroup] =”form“（ngSubmit）=”onSubmit（form.value）“>”）：ng：///ComponentsModule/AdsComponent.html@71：38錯誤：模板解析錯誤：無法綁定'formGroup'，因為它不是'form'的已知屬性。 （“] [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
  ],

Answer 1

正如您的錯誤所述：

模板解析錯誤：無法綁定到'formGroup'，因為它不是'form'的已知屬性。 （“] [formGroup] =”form“（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使用另一個模塊中的組件

Answer 2

請將ReactiveFormsModule聲明為測試模塊的一部分。

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

Answer 3

顯然有多種解決方案。 這對我有用。 在app.module.ts導入ReactiveFormsModule

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