J'utilise Angular 4 et j'obtiens une erreur dans la console:
Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'
Comment puis-je résoudre ça?
J'utilise Angular 4 et j'obtiens une erreur dans la console:
Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'
Comment puis-je résoudre ça?
Réponses:
Pour utiliser la liaison de données bidirectionnelle pour les entrées de formulaire, vous devez importer le FormsModule
package dans votre module angulaire.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
]
ÉDITER
Puisqu'il y a beaucoup de questions en double avec le même problème, j'améliore cette réponse.
Il y a deux raisons possibles
Manquant FormsModule
, ajoutez donc ceci à votre module,
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
]
Vérifiez la syntaxe / l'orthographe de [(ngModel)]
dans la balise d'entrée
Ceci est une bonne réponse. vous devez importer FormsMoudle
premier dans app.module.ts
**
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
FormsModule,
ReactiveFormsModule ,
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
** deuxième dans app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
FormsModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
Meilleures salutations et espoir seront utiles
Votre ngModel
ne fonctionne pas parce que cela ne fait pas partie de votreNgModule
.
Vous devez dire NgModule
que vous êtes autorisé à utiliser ngModel
tout au long de votre application, vous pouvez le faire en l'ajoutant FormsModule
à votre app.module.ts
-> imports
-> []
.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule ], // HERE
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
J'ai rencontré cette erreur lors du test de mon application Angular 6 avec Karma / Jasmine. J'avais déjà importé FormsModule
dans mon module de niveau supérieur. Mais quand j'ai ajouté un nouveau composant qui utilisait [(ngModel)]
mes tests, a commencé à échouer. Dans ce cas, je devais importer FormsModule
dans mon TestBed
TestingModule
.
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule
],
declarations: [
RegisterComponent
]
})
.compileComponents();
}));
En app.module.ts
ajouter ceci:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [FormsModule],
})
Essayez d'ajouter
ngModel au niveau du module
Le code est le même que ci-dessus
Mise à jour avec Angular 7.xx , rencontrez le même problème dans l'un de mes modules .
S'il se trouve dans votre module indépendant, ajoutez ces modules supplémentaires:
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
@NgModule({
imports: [CommonModule, FormsModule], // the order can be random now;
...
})
S'il se trouve dans votre app.module.ts
, ajoutez ces modules:
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule, BrowserModule ], // order can be random now
...
})
Une démo simple pour prouver le cas.
La réponse pour moi était une mauvaise orthographe ngModel
. Je l'avais écrit comme ceci: ngModule
alors qu'il devrait l'être ngModel
.
Toutes les autres tentatives n'ont évidemment pas résolu l'erreur pour moi.
import { FormsModule } from '@angular/forms';
// <<<< l'importer ici
BrowserModule, FormsModule
// <<<< et ici
Il suffit donc de rechercher app.module.ts
ou d'un autre fichier de module et de vous assurer que vous avez FormsModule
importé dans ...
module d'importation de formulaire dans app.module.ts.
import { FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
ContactsComponent
],
imports: [
BrowserModule,HttpModule,FormsModule //Add here form module
],
providers: [],
bootstrap: [AppComponent]
})
En html:
<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">
Dans mon cas, j'ai mal orthographié, je faisais référence à ngmodel au lieu de ng M odel :) J'espère que ça aide!
Attendu - [(ngModel)] Réel - [(ngmodel)]
Vous devez vérifier les éléments suivants si la liaison bidirectionnelle ne fonctionne pas.
En html, le ngModel doit être appelé de cette façon. Il n'y a pas de dépendance sur un autre attribut de l'élément d'entrée
<input [(ngModel)]="inputText">
Assurez-vous que le module FormsModule est importé dans le fichier des modules
app.modules.ts
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HomeComponent // suppose, this is the component in which you are trying to use two ay binding
],
imports: [
BrowserModule,
FormsModule,
// other modules
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Assurez-vous que le composant dans lequel vous essayez d'utiliser ngModel pour la liaison bidirectionnelle est ajouté dans les déclarations du. Code ajouté au point précédent # 2
C'est tout ce que vous devez faire pour que la liaison bidirectionnelle fonctionne avec ngModel, cela est validé jusqu'à angulaire 9
Si vous souhaitez utiliser la liaison de données bidirectionnelle pour les entrées de formulaire, vous devez importer le package FormsModule dans votre module angulaire. Pour plus d'informations, consultez le tutoriel officiel d'Angular 2 ici et la documentation officielle des formulaires
dans app.module.ts, ajoutez les lignes ci-dessous:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
importez d'abord FormsModule puis utilisez ngModel dans votre composant.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
];
Code HTML:
<input type='text' [(ngModel)] ="usertext" />
Si même après l'importation du module de formulaires, le problème persiste, vérifiez que votre entrée n'a pas d'attribut "nom" avec une valeur égale à une autre entrée sur la page.
FormsModule
auimports: []
module où vous utilisezngModel
. Sinon, affichez votre code.