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

Question

LA SITUATION:

S'il vous plaît aider! Je suis en train de faire ce que devrait être une forme très simple dans mon Angular2 application mais n'importe quoi, ça ne fonctionne jamais.

ANGULAIRE DE LA VERSION:

Angulaire 2.0.0 Rc5

LE MESSAGE D'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 contrôleur:

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 j'obtiens cette erreur?

Ai-je raté quelque chose?

Answer 1

RC5 FIX

Vous avez besoin d' import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' dans votre contrôleur et l'ajouter à l' directives en @Component. Qui va résoudre le problème.

Après vous corriger cela, vous obtiendrez probablement une autre erreur, parce que vous n'avez pas à ajouter de l' formControlName="name" à votre entrée dans le formulaire.

RC6/RC7/version Finale FIX

Pour corriger cette erreur, vous avez juste besoin d'importer ReactiveFormsModule de @angular/forms dans votre module. Voici l'exemple d'un module de base avec ReactiveFormsModule d'importation:

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 de plus amples explications, formGroup est un sélecteur pour la directive nommé FormGroupDirective qui est une partie de l' ReactiveFormsModule, d'où la nécessité pour l'importer. Il est utilisé pour lier un existant, FormGroup à un élément du DOM. Vous pouvez en lire plus à ce sujet sur Angulaire officiel de docs page.

Answer 2

Si vous utilisez Angular 4 avec des modules de fonctions (si vous utilisez par exemple un module partagé), vous devez également exporter les ReactiveFormsModule pour fonctionner.

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

Answer 3

Ok, après quelques recherches, j'ai trouvé une solution pour "ne Peut pas se lier à 'formGroup', car il n'est pas connu de la propriété de la "forme"."

Pour mon cas, j'ai été à l'aide de plusieurs modules de fichiers, j'ai ajouté ReactiveFormsModule dans l'app.le module.ts

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

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

Mais ce n'était pas quand j'utilise un [formGroup] directive à partir d'un composant ajouté dans un autre module, par exemple à l'aide de [formGroup] à l'auteur.composante.ts qui est souscrites dans le cadre d'auteur.le module.ts fichier:

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

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

export class AuthorModule {}

J'ai pensé que si j'ai ajouté ReactiveFormsModule dans l'app.le module.ts, par défaut ReactiveFormsModule serait héritée par tous ses enfants modules comme l'auteur.module dans ce cas... (mal!). J'ai besoin d'importer des ReactiveFormsModule de l'auteur.le module.ts afin de rendre toutes les directives de travail:

...
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 submodules, assurez-vous d'importer ReactiveFormsModule dans chaque sous-module de fichier. Espérons que cela aide quelqu'un.

Answer 4

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 le fichier ReactiveFormsModule en .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();
    }));
});
 

Answer 5

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">