Angulaire 2 une liaison bidirectionnelle à l'aide de ngModel ne fonctionne pas
Ne peut pas se lier à 'ngModel" puisqu'elle n'est pas une propriété de l' 'input' élément et il n'y a pas de correspondance pour les directives correspondantes de la propriété
Remarque: im à l'aide de l'alpha.31
import { Component, View, bootstrap } from 'angular2/angular2'
@Component({
selector: 'data-bind'
})
@View({
template:`
<input id="name" type="text"
[ng-model]="name"
(ng-model)="name = $event" />
{{ name }}
`
})
class DataBinding {
name: string;
constructor(){
this.name = 'Jose';
}
}
bootstrap(DataBinding);
Vous devez vous connecter pour publier un commentaire.
Angulaire a publié sa version finale le 15 septembre. À la différence Angulaire 1 vous pouvez utiliser
ngModel
directive Angulaire 2 pour les deux sens de la liaison de données, mais vous avez besoin de l'écrire dans un peu différentes comme[(ngModel)]
(de la Banane dans une boîte de syntaxe). Presque tous les angular2 directives de base ne prend pas en chargekebab-case
maintenant au lieu de cela, vous devez utilisercamelCase
.app/app.composante.ts
app/app.le module.ts
app/main.ts
Démo Plunkr
Points Clés:
ngModel dans angular2 est valable que si le FormsModule est disponible en tant que partie de votre AppModule.
ng-model
est syntatically mal.Donc, pour corriger votre erreur.
Étape 1: Importation FormsModule
Étape 2: Ajouter aux importations tableau de votre AppModule comme
Étape 3: Changement
ng-model
comme ngModel avec de la banane de casesRemarque: Aussi, vous pouvez gérer les deux sens de la liaison de données séparément ainsi que ci-dessous
Comme par Angular2 final, vous n'avez même pas à importer
FORM_DIRECTIVES
comme suggéré ci-dessus par de nombreux. Cependant, la syntaxe a été modifié kebab-affaire a été classée pour le mieux-être.Il suffit de remplacer
ng-model
avecngModel
et l'envelopper dans une boîte de bananes. Mais vous avez versé le code en deux fichiers:app.ts:
app.le module.ts:
Angulaire 2 Beta
Cette réponse est pour ceux qui utilisent Javascript pour angularJS v. 2.0 Beta.
À utiliser
ngModel
à votre avis, vous devriez dire à l'angle du compilateur que vous utilisez une directive appeléengModel
.Comment?
À utiliser
ngModel
il y a deux bibliothèques dans angular2 Bêta, et ils sontng.common.FORM_DIRECTIVES
etng.common.NgModel
.Fait
ng.common.FORM_DIRECTIVES
n'est rien, mais un groupe de directives qui sont utiles lorsque vous créez un formulaire. Il comprendNgModel
directive.ng.common.NgModel
contient la defenition de la directivengModel
.ng.common.FORM_DIRECTIVES
s'agit du regroupement de certains de la directive, y comprisngModel
qui sont utiles si des formes. Donc nous ne voulons pas d'inclure chaque directive pour la forme seulement inclureng.common.FORM_DIRECTIVES
Dans l'application.le module.ts
Plus tard dans l' @NgModule décorateur d'importation:
La réponse qui m'a aidé:
La directive [(ngModel)]= ne fonctionne plus dans rc5
Pour résumer: champs d'entrée exigent maintenant la propriété
name
dans le formulaire.au lieu de ng-model, vous pouvez utiliser ce code:
à l'intérieur de votre application.composante.ts
Ajouter le code ci-dessous pour les fichiers suivants.
app.composante.ts
app.le module.ts
Espère que cette aide