web-dev-qa-db-fra.com

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

LA SITUATION:

S'il vous plaît aider! J'essaie de faire ce qui devrait être une forme très simple dans mon application Angular2 mais peu importe ce que cela ne fonctionne jamais.

VERSION ANGULAIRE:

Angulaire 2.0.0 Rc5

L'ERREUR: 

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

enter image description here

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?

Est-ce que je manque quelque chose?

angulartypescriptangular2-forms
588
FrancescoMussi

RC5 FIX

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

Une fois que vous aurez résolu ce problème, vous obtiendrez probablement une autre erreur car vous n'avez pas ajouté formControlName="name" à votre entrée sous forme.

RC6/RC7/Version finale FIX

Pour corriger cette erreur, il vous suffit d'importer ReactiveFormsModule à partir de @angular/forms dans votre module. Voici l'exemple d'un module de base avec ReactiveFormsModule import:

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, formGroup est un sélecteur de directive nommée FormGroupDirective qui fait partie de ReactiveFormsModule, d'où la nécessité de l'importer. Il est utilisé pour lier un FormGroup existant à un élément DOM. Vous pouvez en savoir plus à ce sujet sur page de documentation officielle d'Angular .

1096
Stefan Svrkota

Angular 4 en combinaison avec modules de fonctions (si vous utilisez par exemple un module partagé), vous devez également exporter le fichier ReactiveFormsModule pour qu'il fonctionne.

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 { }
117
Undrium

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é à un autre module, par exemple. using [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 pour que toutes les directives fonctionnent:

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

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

export class AuthorModule {}

Par conséquent, si vous utilisez des sous-modules, veillez à importer ReactiveFormsModule dans chaque fichier de sous-module. J'espère que cela aide quelqu'un.

88
Ashutosh Jha

J'ai rencontré cette erreur lors du test unitaire d'un composant (uniquement lors du test, au sein de l'application, cela a fonctionné normalement). La solution consiste à importer ReactiveFormsModule dans le fichier .spec.ts:

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

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

La réponse suggérée ne fonctionnait pas pour moi avec Angular 4. À la place, je devais utiliser un autre moyen de liaison d'attribut avec le préfixe attr:

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

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]
})
15
sudheer nunna

J'ai eu le même problème avec Angular 7. Importez simplement ce qui suit 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
],
10
Chamila Maddumage

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

Les modules n'héritent pas des 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 inversement. Avant que ContactComponent puisse se lier avec [(ngModel)], son ContactModule doit importer FormsModule.

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

10
Ian Griffin

Ce problème est dû à une importation manquante de FormsModule. ReactiveFormsModule .I est également arrivé avec le même problème. Mon cas était diff. comme je travaillais avec des modules. J'ai donc manqué les importations précédentes dans mes modules parents, même si je l'avais importé 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]
    })
7
Saurav

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

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

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

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

5
GKooij

N PEU NOTE: Faites attention aux chargeurs et minimisez (env. Rails):

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

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

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

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

Cela m'a conduit au chargeur et au fait qu'il réduise mon code HTML au minimum.

Après avoir changé les options, tout a fonctionné comme il se doit et je pourrais 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.

3
Peter Højlund Andersen

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 ajouter ce module à votre fichier de test de la manière suivante:

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();
  });
});
3
Hamid

utiliser et importer 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 { }
3
mojtaba ramezani

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('')
 });

xxx.html fichier-

  <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] insted de [FormGroup]. Vérifiez votre orthographe correctement en .html. Il ne jette pas d'erreur de temps de compilation Si quelque chose ne va pas dans le fichier .html.

2
DIBYA RANJAN TRIPATHY

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 rien qu'il sache pour cet élément (dans ce cas form).

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

[formsGroup], avec s après form

1
bresleveloper

Une fois que j’ai ajouté mon module à la AppModule tout a bien fonctionné.

0
Leandro