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

807

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'

entrez la description de l'image ici

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?

FrancescoMussi
la source

Réponses:

1413

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 .

Stefan Svrkota
la source
13
Ce que je ne comprends pas, c'est pourquoi il faut ajouter REACTIVE_FORM_DIRECTIVES si FormsModule est importé dans app.module. L'intérêt des modules est d'éviter d'avoir à déclarer des directives à l'intérieur des composants.
Daniel Pliscki
19
@DanielPliscki Vous avez tout à fait raison, je viens de découvrir qu'ils ont corrigé ce problème dans la version RC6 qui a été publiée aujourd'hui. Maintenant, vous n'avez pas besoin de faire cela, il vous suffit d'importer FormsModuleet ReactiveFormsModule. Je vais modifier ma réponse.
Stefan Svrkota
12
J'ai perdu une heure en oubliant d'avoir créé un module distinct pour mon formulaire de connexion afin de charger paresseusement les modules entre les états. (Je suis nouveau sur A2, je préfère toujours A1) Assurez-vous d'utiliser le bon module! Ne sois pas un schmuck comme moi. Vous n'avez également plus besoin d'ajouter au composant. Les importations dans votre module suffisent. Merci
user1889992
4
Merci, a travaillé pour moi. Je ne comprends pas pourquoi cela n'est pas mentionné dans les guides de FormControls dans Angular 2 sur lesquels je suis tombé ..
cjohansson
1
Dans Angular 4, j'ai ajouté ReactiveFormsModuledans la liste des fournisseurs et cela a fonctionné. Je ne sais pas si c'est la façon dont vous êtes censé le faire.
BrunoLM
151

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 { } 
Undrium
la source
122

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.

Ashutosh Jha
la source
1
Fonctionne pour moi, exactement le même problème, je pensais vraiment que les modules du tableau des exportations seront hérités par les modules enfants ... Je ne sais pas pourquoi exactement! EDIT: la documentation indique que les exportations doivent rendre les composants, les tuyaux et les directives disponibles dans le MODÈLE de n'importe quel COMPOSANT ()
guy777
52

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();
    }));
});
xuhcc
la source
24

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">
str
la source
3
Hé mec! Êtes-vous sûr que votre réponse est liée à la question? :) La question portait sur un problème de configuration d'un formulaire - car en ne configurant pas correctement le ngModule
FrancescoMussi
1
@johnnyfittizio Je suis sûr. Même scénario, même message d'erreur.
str
2
Cela a fonctionné pour moi, mais c'est étrange - pourquoi ai-je besoin du attr.?
CodyBugstein du
Merci beaucoup. Cela a également fonctionné pour moi, mais je pense qu'il doit y avoir autre chose déclenchant le problème, comme le versionnage de la bibliothèque ou le positionnement des balises <form>? Étrange.
Memetican
Je l'ai trouvé - le problème était que j'avais besoin d'importer ReactiveFormsModuledirectement dans ma page .module.ts. Pas le .page.ts... une fois que j'ai fait cela, mon modèle pouvait identifier correctement l' formGroupattribut, sans le attr.préfixe.
Memetican
19

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]
})
sudheer nunna
la source
14

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

Ian Griffin
la source
14

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

Abhishek Singh
la source
13

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
],
Chamila Maddumage
la source
1
Cela ne fonctionne pas pour moi dans Angulat 7.
RaffAl
9

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]
    })
Saurav
la source
7

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.

GKooij
la source
7

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';
Mr Giggles
la source
5

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.

Peter Højlund Andersen
la source
5

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 { }
mojtaba ramezani
la source
5

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();
  });
});
Hamid
la source
5

Importez ReactiveFormsModule dans le module correspondant

Meghnath Das
la source
5

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 { }
Shashwat Gupta
la source
4

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.

DIBYA RANJAN TRIPATHY
la source
1
J'ai fait la même erreur !! Merci beaucoup. en html j'avais [FormGroup] pas [formGroup]
tony2tones
Merci pour les commentaires.
DIBYA RANJAN TRIPATHY
4

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

M Abdullah
la source
4

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"

prospectus
la source
1
Même problème ici
greg
3

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

Avi E. Koenig
la source
3

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 {}
Peter Edwards
la source
3

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é.

tonertop
la source
2

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

bresleveloper
la source
0

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'.

NDavis
la source
0

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

Nanda Kishore Allu
la source
-2

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

Leandro
la source