Angular 4 Kann nicht an 'formGroup' binden, da es keine bekannte Eigenschaft von 'form' ist

Question

Ich bin neu in der Verwendung von Angular 4. Ich versuche, modellgetriebene Formen in eckigen 4 zu üben, aber es bleibt erhalten Error.

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)">

Ich habe versucht, es für das Problem zu lösen, wie zu lösen. Meistens ist die Lösung, indem Sie ReactiveFormsModule in das Modul importieren. Hier ist der Code in meinem 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); 
    } 

} 

und hier ist der Code in meinem 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> 

und hier ist der Code in meinem Modul

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

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

Answer 1

Wie Ihr Fehler lautet:

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@

können wir annehmen, dass Ihr AdsComponent ein Teil der ComponentsModule Deklaration ist, aber Sie ReactiveFormsModule in AppModule importiert haben. Um also wird Winkel der Lage sein, Vorlage von AdsComponent zu kompilieren Sie sollten:

1) entweder Import ReactiveFormsModule in ComponentsModule:

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

2) oder Import-Modul, das ReactiveFormModule

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

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

exportiert Siehe auch:

Angular 2 Use component from another module

Answer 2

Bitte deklarieren Sie das ReactiveFormsModule als Teil Ihres Testmoduls.

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