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

LA SITUATION:

Aidez-moi! J'essaie de créer ce qui devrait être un formulaire très simple dans mon application Angular2, mais peu importe ce qui ne fonctionne jamais.

VERSION ANGULAIRE:

Angular 2.0.0 Rc5

L'ERREUR:

Can't bind to 'formGroup' since it isn't a known property of 'form'

LE CODE:

La vue:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

Le controlle:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    } 
}

Le ngModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

@NgModule({
    imports: [ 
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

LA QUESTION:

Pourquoi ai-je cette erreur?

Suis-je en train de manquer quelque chose?

RC5 FIX

Vous devez import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'dans votre contrôleur et de l' ajouter à directivesen @Component. Cela résoudra le problème.

Après avoir corrigé cela, vous obtiendrez probablement une autre erreur car vous n'avez pas ajouté formControlName="name"à votre entrée dans le formulaire.

RC6 / RC7 / Version finale FIX

Pour corriger cette erreur, il vous suffit d'importer ReactiveFormsModuledepuis @angular/formsdans votre module. Voici l'exemple d'un module de base avec ReactiveFormsModuleimportation:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Pour expliquer davantage, formGroupest un sélecteur de directive nommé FormGroupDirectivequi fait partie de ReactiveFormsModule, d'où la nécessité de l'importer. Il est utilisé pour lier un FormGroupélément existant à un élément DOM. Vous pouvez en savoir plus à ce sujet sur la page des documents officiels d'Angular .

Angular 4 en combinaison avec des modules de fonctionnalités (si vous utilisez par exemple un module partagé) vous oblige également à exporter le ReactiveFormsModulepour travailler.

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { } 

Ok après quelques recherches, j'ai trouvé une solution pour "Impossible de se lier à 'formGroup' car ce n'est pas une propriété connue de 'form'."

Pour mon cas, j'ai utilisé plusieurs fichiers de modules, j'ai ajouté ReactiveFormsModule dans app.module.ts

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

Mais cela ne fonctionnait pas lorsque j'utilisais une directive [formGroup] à partir d'un composant ajouté dans un autre module, par exemple en utilisant [formGroup] dans author.component.ts qui est abonné dans le fichier author.module.ts:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

Je pensais que si j'ajoutais ReactiveFormsModule dans app.module.ts, par défaut ReactiveFormsModule serait hérité par tous ses modules enfants comme author.module dans ce cas ... (faux!). J'avais besoin d'importer ReactiveFormsModule dans author.module.ts afin de faire fonctionner toutes les directives:

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

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

Donc, si vous utilisez des sous-modules, assurez-vous d'importer ReactiveFormsModule dans chaque fichier de sous-module. J'espère que cela aide n'importe qui.

J'ai rencontré cette erreur lors des tests unitaires d'un composant (uniquement pendant les tests, au sein de l'application, cela a fonctionné normalement). La solution est d'importer ReactiveFormsModuleen .spec.tsfichier:

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

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});

La réponse suggérée ne fonctionnait pas pour moi avec Angular 4. Au lieu de cela, j'ai dû utiliser une autre façon de lier les attributs avec le attrpréfixe:

<element [attr.attribute-to-bind]="someValue">

Si vous devez importer deux modules, ajoutez comme ceci ci-dessous

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

N'oubliez pas que si vous avez défini des "modules de fonctions", vous devrez importer dans le module de fonctions, même si vous avez déjà importé dans le AppModule. De la documentation angulaire:

Les modules n'héritent pas de l'accès aux composants, directives ou canaux déclarés dans d'autres modules. Ce que AppModule importe n'est pas pertinent pour ContactModule et vice versa. Avant que ContactComponent puisse se lier avec [(ngModel)], son ContactModule doit importer FormsModule.

https://angular.io/docs/ts/latest/guide/ngmodule.html

L'erreur indique que FormGroup n'est pas reconnu dans ce module. Vous devez donc importer ces modules (ci-dessous) dans chaque module qui utilise FormGroup

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

Ajoutez ensuite FormsModule et ReactiveFormsModule dans le tableau d'importation de votre module .

imports: [
  FormsModule,
  ReactiveFormsModule
],

Vous pensez peut-être que je l'ai déjà ajouté dans AppModule et qu'il devrait en hériter? Mais ce n'est pas. car ces modules exportent les directives requises qui ne sont disponibles que dans les modules d'importation. En savoir plus ici ... https://angular.io/guide/sharing-ngmodules .

D'autres facteurs pour ces erreurs peuvent être des erreurs orthographiques comme ci-dessous ...

[FormGroup] = "form" Capital F au lieu de petit f

[formsGroup] = "form" Extra s après le formulaire

J'ai eu le même problème avec Angular 7. Importez simplement le suivant dans votre fichier app.module.ts.

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

Ajoutez ensuite FormsModule et ReactiveFormsModule dans votre tableau d'importations.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Ce problème se produit en raison de l'importation manquante de FormsModule, ReactiveFormsModule .I est également venu avec le même problème. Mon cas était différent. comme je travaillais avec des modules, j'ai donc raté les importations ci-dessus dans mes modules parents bien que je les ai importées dans des modules enfants, cela ne fonctionnait pas.

Ensuite, je l'ai importé dans mes modules parents comme ci-dessous, et cela a fonctionné!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })

Pour les personnes se promenant ces discussions sur cette erreur. Dans mon cas, j'avais un module partagé dans lequel je n'exportais que les FormsModule et ReactiveFormsModule et j'ai oublié de l'importer. Cela a provoqué une étrange erreur que les groupes de formulaires ne fonctionnaient pas dans les sous-composants. J'espère que cela aide les gens à se gratter la tête.

Je rencontrais cette erreur en essayant de faire des tests e2e et cela me rendait fou qu'il n'y ait pas de réponse à cela.

SI VOUS FAITES DES TESTS, trouvez votre fichier * .specs.ts et ajoutez:

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

UNE PETITE NOTE: Faites attention aux chargeurs et minimisez (Rails env.):

Après avoir vu cette erreur et essayé toutes les solutions, j'ai réalisé qu'il y avait un problème avec mon chargeur html.

J'ai configuré mon environnement Rails pour importer avec succès les chemins HTML de mes composants avec ce chargeur ( config/loaders/html.js.):

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

Après quelques heures innombrables efforts et des importations ReactiveFormsModule j'ai vu que mon formGroupétait de petites lettres: formgroup.

Cela m'a conduit au chargeur et au fait qu'il a déclassé mon HTML sur minimiser.

Après avoir changé les options, tout a fonctionné comme il se doit et j'ai pu recommencer à pleurer.

Je sais que ce n'est pas une réponse à la question, mais pour les futurs visiteurs de Rails (et d'autres avec des chargeurs personnalisés), je pense que cela pourrait être utile.

utilisation et importation de REACTIVE_FORM_DIRECTIVES :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Si vous rencontrez ce problème lorsque vous développez un composant, vous devez donc ajouter ces deux modules à votre module le plus proche:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Et si vous développez un test pour vos composants, vous devez donc ajouter ce module à votre fichier de test comme ceci:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Importez ReactiveFormsModule dans le module correspondant

Solution simple:

étape 1: importez ReactiveFormModule

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

étape 2: ajoutez "ReactiveFormsModule" à la section d'importation

imports: [

    ReactiveFormsModule
  ]

Étape 3: redémarrez l'application et terminé

Exemple :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }

Importez et enregistrez ReactiveFormsModule dans votre app.module.ts.

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Assurez-vous que votre orthographe est correcte dans les fichiers .ts et .html. xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

fichier xxx.html-

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

J'étais par erreur écrit [FormGroup] au lieu de [formGroup]. Vérifiez votre orthographe correctement en .html. Il ne génère pas d'erreur de temps de compilation Si quelque chose ne va pas dans le fichier .html.

Remarque : si vous travaillez à l'intérieur du composant du module enfant, il vous suffit d'importer ReactiveFormsModule dans le module enfant plutôt que le module racine de l'application parent

Ne sois pas stupide comme moi. Obtient la même erreur que ci-dessus, AUCUNE des options de ce fil n'a fonctionné. Puis j'ai réalisé que j'avais capitalisé 'F' dans FormGroup. Ah!

Au lieu de:

[FormGroup]="form"

Faire:

[formGroup]="form"

s'il s'agit simplement d'une erreur de frappe mais que tout sur votre formulaire fonctionne, vous devrez peut-être simplement redémarrer votre IDE

J'ai eu le même problème, assurez-vous que si vous utilisez sous-modules (par exemple, vous avez non seulement app.component.module.ts, mais vous avez un composant distinct tel que login.module.ts, que vous incluez l'importation ReactiveFormsModule dans cette connexion .module.ts import, pour que cela fonctionne. Je n'ai même pas besoin d'importer ReactiveFormsModule dans mon app.component.module car j'utilise des sous-modules pour tout.

login.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

Pourrait aider quelqu'un:

lorsque vous avez un formGroup dans un modal (entrycomponent), vous devez alors importer ReactiveFormsModule également dans le module où le modal est instancié.

Can't bind to 'formGroup' since it isn't a known property of 'form'

signifie que vous essayez de lier une propriété en utilisant angular ( [prop]) mais angular ne trouve pas tout ce qu'il sait pour cet élément (dans ce casform ).

cela peut arriver en n'utilisant pas le bon module (il manque une importation quelque part sur le chemin) et parfois simplement provoquer une faute de frappe comme:

[formsGroup], avec saprèsform

Ma solution était subtile et je ne la voyais pas déjà répertoriée.

J'utilisais des formulaires réactifs dans un composant Angular Materials Dialog qui n'était pas déclaré dans app.module.ts. Le composant principal a été déclaré dans app.module.tset ouvrirait le composant de dialogue, mais le composant de dialogue n'a pas été explicitement déclaré dans app.module.ts.

Je n'ai eu aucun problème à utiliser le composant de dialogue normalement, sauf que le formulaire a généré cette erreur chaque fois que j'ai ouvert la boîte de dialogue.

Can't bind to 'formGroup' since it isn't a known property of 'form'.

Premièrement, il n'est pas lié aux versions angulaires> 2 . Il vous suffit d'importer le suivant dans votre fichier app.module.ts pour résoudre les problèmes.

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

Ajoutez ensuite FormsModule et ReactiveFormsModule dans votre tableau d'importations.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Remarque : vous pouvez également importer ReactiveFormsModulevers un module spécifique au lieu deapp.module.ts

Une fois que j'ai ajouté mon module à AppModuletout, tout a bien fonctionné.