Angular : résoudre l'erreur Can't bind to 'ngModel' since it isn't a known property of 'input'

Angular : résoudre l'erreur Can't bind to 'ngModel' since it isn't a known property of 'input' L'erreur en question s'explique par l'absence d'un import de module dans votre projet. Voici comment la résoudre pas à pas.

Le framework AngularJS fournit un module permettant de créer des templates de formulaire. En utilisant directement le code, vous afficherez cependant un message d'erreur "Can't bind to 'ngModel' since it isn't a known property of 'input'". Cette erreur s'explique par l'absence d'un import de module dans votre projet.

Lorsque vous rencontrez ce message d'erreur sur votre application, cela signifie que la directive qui permet d'importer le module "FormsModule" est manquante. C'est ce module qui gère les templates de formulaire. Depuis la version 2 d'Angular, les développeurs ont en effet fait le choix de séparer en modules le maximum de composants afin que vous n'utilisiez que ce dont vous avez besoin et que le framework soit le plus modulable possible. Le composant "ng-model" fait donc maintenant partie du module "FormsModule" et il faut l'importer.

Il existe deux façons différentes pour gérer les imports de module lorsqu'on développe un site utilisant AngularJS. La première consiste simplement à ajouter une ligne supplémentaire dans le fichier "app.module.ts". C'est cette ligne qui va importer le module dans votre projet.

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

Il est également possible de regrouper toutes les instructions d'imports de modules dans une seule instruction. Pour ajouter le module "FormsModule", il faudra alors le spécifier dans la liste des modules importés.

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

Vous trouverez plus d'informations sur les deux systèmes d'imports de module d'Angular en lisant le tutorial officiel : https://angular.io/tutorial/toh-pt1#!#two-way-binding.

AngularJS