Angular : comment lié (bind) un 'formGroup' alors qu'il n'est pas reconnu comme une propriété 'form'

Le problème est provoqué par l'absence d'une classe dans les modules importés. Voici comme le résoudre.

Depuis sa version 2, le framework Angular JS de Google a changé radicalement son mode de fonctionnement. Il est plus flexible et dispose d'un système de modules que l'on doit importer selon nos besoins. C'est une absence dans les modules importés qui provoque le message d'erreur "Can't bind to 'formGroup' since it isn't a known property of 'form'".

Cette erreur est due à l'absence de la classe "FormGroup". Cette classe permet de lier les formulaires créés sous Angular avec le code HTML. Pour pouvoir les utiliser dans votre application, vous devez importer les modules "FormsModule" et "ReactiveFormsModule" dans votre application. Pour importer ces modules, vous pouvez ajouter une instruction avec la commande "import" au début de votre projet.

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

Il est également possible de regrouper toutes les instructions d'import en une seule instruction grâce à la directive "@NgModule".

@NgModule({
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ],
    ...
})

Si vous travaillez avec une version antérieure ou égale à la version 2.0.0 RC5, le correctif n'est pas le même. Il faut importer dans le contrôleur le module "REACTIVE_FORM_DIRECTIVES" et l'ajouter à vos directives dans la variable "@component".

import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'

Si vous utilisez cette version, nous vous conseillons de mettre à jour votre framework Angular. Cette version est une version de développement d'Angular et Angular a eu de nombreuses mises à jour depuis. Vous pouvez utiliser la version stable de la branche 2 en remplacement.

AngularJS