角4 'form'のプロパティが既知ではないため 'formGroup'にバインドできません

Question

私はAngular 4を新しく使用しています。私はAngle 4でモデル駆動型を練習しようとしていますが、エラー。

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/AdsComponent.html@71:38 Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)">

解決方法の問題を探してみました。ほとんどの解決策は、モジュールにReactiveFormsModuleをインポートすることです。 ここに私の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

ようです私の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); 
    } 

} 

、ここでのコードがありますあなたのエラーの状態：

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/AdsComponent.html@

あなたはAdsComponentがComponentsModuleの一部であると仮定できますが、AppModuleにReactiveFormsModuleをインポートしました。だから、角度の順にAdsComponentのテンプレートをコンパイルすることができますあなたべき：

1）のいずれかのインポートReactiveFormsModuleComponentsModule中：ReactiveFormModule

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

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

をエクスポートしている

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

2）またはインポートモジュール他：

Angular 2 Use component from another module

Answer 2

テストモジュールの一部としてReactiveFormsModuleを宣言してください。

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