web-dev-qa-db-de.com

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

Ich bin neu in der Verwendung von Angular 4. Ich versuche, modellgetriebene Formen in Winkel 4 zu üben, aber es wird immer dieser Fehler angezeigt.

Fehler bei der Vorlagenanalyse: Kann nicht an 'formGroup' binden, da es keine .__ ist. bekannte Eigenschaft von 'Form'. (" ]. [formGroup] =" form "(ngSubmit) =" onSubmit (form.value) "> __."): ng: /// ComponentsModule/AdsComponent. html @ 71: 38 Fehler: Vorlagenanalysefehler: Kann nicht an 'formGroup' binden, da es sich nicht um ein bekanntes .__ handelt. Eigenschaft von 'Form'. (" ] [formGroup] =" form "(ngSubmit) =" onSubmit (form.value) ">

Ich habe versucht, das Problem zu lösen. Meistens ist die Lösung der Import von ReactiveFormsModule im Modul ..__ Hier ist der Code in meiner Komponente.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 meiner Komponente.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
  ],
javascripthtmlangulartypescript
5
Jaaayz

Wie Ihr Fehler besagt:

Fehler bei der Vorlagenanalyse: Kann nicht an 'formGroup' binden, da es keine .__ ist. bekannte Eigenschaft von 'Form'. ("] [formGroup] =" form " (ngSubmit) =" onSubmit (form.value) ">"): ng: ///ComponentsModule/[email protected]

wir können davon ausgehen, dass Ihre AdsComponent ein Teil der ComponentsModule-Deklaration ist, Sie jedoch ReactiveFormsModule in AppModule importiert haben. Damit eckig die Vorlage von AdsComponent kompilieren kann, sollten Sie: 

1) entweder import ReactiveFormsModule in ComponentsModule:

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

2) oder Importmodul, das ReactiveFormModule exportiert 

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

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

Siehe auch:

Angular 2 Komponente aus einem anderen Modul verwenden

9
yurzui

Bitte erklären Sie das ReactiveFormsModule als Teil Ihres Testmoduls.

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

Es gibt offensichtlich mehrere Lösungen. Das hat bei mir funktioniert. Importieren Sie die ReactiveFormsModule in app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
0
James Poulose