web-dev-qa-db-fra.com

Angular 4 Impossible de se lier à 'formGroup' car ce n'est pas une propriété connue de 'form'

Je suis nouveau dans l'utilisation de Angular 4. J'essaie de pratiquer des formes basées sur un modèle dans Angular 4, mais l'erreur continue à se produire.

Erreurs d'analyse de modèle: impossible de se lier à 'formGroup' car ce n'est pas un propriété connue de 'forme'. ("__. ]. [formGroup] =" form "(ngSubmit) =" onSubmit (form.value) "> "): ng: /// ComponentsModule/AdsComponent. html @ 71: 38 Erreur: Erreurs d'analyse du modèle: impossible de se lier à 'formGroup', car ce n'est pas un fichier connu propriété de 'forme'. (" ] [formGroup] =" form "(ngSubmit) =" onSubmit (form.value) ">

J'ai essayé de chercher le problème sur la façon de résoudre. Généralement, la solution consiste à importer ReactiveFormsModule dans le module . Voici le code dans mon composant.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);
   }

}

et voici le code dans mon composant.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>

et voici le code dans mon module

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

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

Comme votre erreur le dit:

Erreurs d'analyse de modèle: impossible de se lier à 'formGroup' car ce n'est pas un propriété connue de 'forme'. ("] [formGroup] =" form " (ngSubmit) =" onSubmit (form.value) ">"): ng: ///ComponentsModule/AdsComponent.html@

nous pouvons supposer que votre AdsComponent fait partie de la déclaration ComponentsModule mais vous avez importé ReactiveFormsModule dans AppModule. Donc, pour que angular puisse compiler le modèle de AdsComponent, vous devriez: 

1) soit importer ReactiveFormsModule dans ComponentsModule:

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

2) ou module d'importation qui exporte ReactiveFormModule 

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

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

Voir également:

Angular 2 Utiliser un composant d'un autre module

9
yurzui

Veuillez déclarer le ReactiveFormsModule dans le cadre de votre module de test.

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

Il y a évidemment plusieurs solutions. Cela a fonctionné pour moi. Importer la ReactiveFormsModule dans app.module.ts

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