Intereting Posts

Version de compilateur inconnue lors de la compilation de Boost avec MSVC 14.0 (VS 2015) Utilisez une API de bibliothèque java .jar en C #? Utilisation de Google Play Services LocationClient dans le service d’arrière-plan Comment définir l’alpha de uiclearcolor? Pourquoi utiliser Softmax par opposition à la normalisation standard? Graphviz + Doxygen pour générer des diagrammes de classes UML Printemps vs EJB. Le ressort peut-il remplacer l’EJB? Comment spécifier un paramètre nommé JPA entouré de caractères génériques? Comment définir la version python du pilote dans spark? Obtenir l’URL de la page ASP.Net dans code-behind Objective-C Le moyen le plus simple de créer une chaîne séparée par des virgules à partir d’un tableau d’objects Commentez une instruction include dans un fichier HTML en utilisant Jekyll Comment configurer PYTHONPATH personnalisé avec VM et PyCharm? foldl est la queue récursive, alors pourquoi se plier plus vite que foldl? Comment savoir si une variable est vide ou non dans Bash

Angular 2: impossible de se lier à ‘ngModel’ car il ne s’agit pas d’une propriété connue de ‘input’

J’essaie d’implémenter des formulaires dynamics dans Angular 2. J’ai ajouté des fonctionnalités supplémentaires telles que Supprimer et Annuler aux formulaires dynamics. J’ai suivi cette documentation: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

entrer la description de l'image ici

J’ai apporté quelques modifications au code. Je reçois une erreur ici.

Comment puis-je faire cette erreur?

Vous pouvez trouver le code complet ici: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , qui fonctionne dans plunker mais pas dans mon système local.

Code HTML:

   {{question.label}}    {{opt.value}}   
 {{question.label}} is required
 
     
 
  Saved the following values
{{payLoad}}

Code du composant:

 import { Component, Input, OnInit } from '@angular/core'; import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { QuestionBase } from './question-base'; import { QuestionControlService } from './question-control.service'; import { ControlGroup } from '@angular/common'; import {ChangeDetectorRef} from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'dynamic-form', templateUrl: 'app/dynamicform/form.component.html', directives: [REACTIVE_FORM_DIRECTIVES], providers: [QuestionControlService] }) export class DynamicFormComponent implements OnInit { @Input() questions: QuestionBase[] = []; form: FormGroup; payLoad:any; payLoad2:any; questiont: QuestionBase; questiond: QuestionBase; constructor(private qcs: QuestionControlService, private cdr: ChangeDetectorRef) { } ngOnInit() { this.form = this.qcs.toFormGroup(this.questions); console.log("Form Init",this.questions); this.questiont = JSON.parse(JSON.ssortingngify(this.questions)); this.questiond = JSON.parse(JSON.ssortingngify(this.questions)); } onSubmit() { this.payLoad = JSON.ssortingngify(this.form.value); this.payLoad2=this.payLoad; this.questiont = JSON.parse(JSON.ssortingngify(this.questions)); console.log("Submitted data",this.questions); } cancel(){ console.log("Canceled"); this.questions = JSON.parse(JSON.ssortingngify(this.questiont)); } clear(){ this.questions = JSON.parse(JSON.ssortingngify(this.questiond)); this.questiont = JSON.parse(JSON.ssortingngify(this.questiond)); console.log("Cleared"); this.cdr.detectChanges(); } }

Erreur DI angular – EXCEPTION: impossible de résoudre tous les parameters

J’ai trouvé cette solution en faisant une recherche sur Google, mettez à jour votre code @NgModule comme ceci:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Source: impossible de se lier à ‘ngModel’ car il ne s’agit pas d’une propriété connue de ‘input’

Pour que ngModel fonctionne lorsque vous utilisez AppModules (NgModule), vous devez importer FormsModule dans votre AppModule.

Comme ça:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, FormsModule], bootstrap: [AppComponent] }) export class AppModule {}

J’ai rencontré une erreur similaire après la mise à niveau vers RC5; c’est-à-dire angular 2: impossible de se lier à ‘ngModel’ car il ne s’agit pas d’une propriété connue de ‘input’.

Le code sur Plunker vous montre Angular2 RC4, mais l’exemple de code sur https://angular.io/docs/ts/latest/cookbook/dynamic-form.html utilise NGModule qui fait partie de RC5. NGModules est un changement de rupture de RC4 à RC5.

Cette page explique la migration de RC4 à RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

J’espère que cela corrige l’erreur que vous obtenez et vous aidera à aller dans la bonne direction.

En bref, je devais créer un NGModule dans app.module.ts:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

J’ai ensuite changé de main.ts pour utiliser le module:

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

Bien sûr, je devais également mettre à jour les dépendances dans package.json. Voici mes dépendances à partir de package.json. Certes, je les ai regroupés à partir d’autres sources (peut-être les exemples de ng docs), de sorte que votre kilométrage peut varier:

 ... "dependencies": { "@angular/common": "2.0.0-rc.5", "@angular/comstackr": "2.0.0-rc.5", "@angular/core": "2.0.0-rc.5", "@angular/forms": "0.3.0", "@angular/http": "2.0.0-rc.5", "@angular/platform-browser": "2.0.0-rc.5", "@angular/platform-browser-dynamic": "2.0.0-rc.5", "@angular/router": "3.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.5", "systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "angular2-in-memory-web-api": "0.0.15", "bootstrap": "^3.3.6" }, ...

J’espère que cela aide mieux. 🙂

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

Vous devriez également append les manquants.

Vous venez d’append FormsModule et importez le FormsModule dans votre fichier app.module.ts .

 import { FormsModule } from '@angular/forms'; imports: [ BrowserModule, FormsModule ],

Ajoutez simplement les deux lignes ci-dessus dans votre app.module.ts . Ça marche bien

Vous devez importer FormsModule dans votre @NgModule Decorator, @NgModule est présent dans votre fichier moduleName.module.ts.

 import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] })

Étape à suivre

1. Ouvrez votre fichier app.module.ts .

2. Ajoutez import { FormsModule } from '@angular/forms';

3. Ajoutez FormsModule aux imports tant imports: [ BrowserModule, FormsModule ],

Le résultat final ressemblera à ceci

 ..... import { FormsModule } from '@angular/forms'; ..... @NgModule({ ..... imports: [ BrowserModule, FormsModule ], ..... })

Pour pouvoir utiliser 'ngModule' , le 'FormsModule' (à partir de @angular/forms ) doit être ajouté à votre tableau import[] dans AppModule (doit être présent par défaut dans un projet CLI).

Vous devez importer la dépendance @ angular / forms sur votre module.

Si vous utilisez npm, installez la dépendance:

 npm install @angular/forms --save

Importez-le dans votre module:

 import {FormsModule} from '@angular/forms'; @NgModule({ imports: [.., FormsModule,..], declarations: [......], bootstrap: [......] })

Et si vous utilisez SystemJs pour charger des modules

 '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',

Maintenant, vous pouvez utiliser [(ngModel)] pour deux méthodes de liaison.

Importer d’abord FormsModule à partir de la librairie angular et sous NgModule l’a déclaré dans les importations

 import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] })

Cette réponse peut vous aider si vous utilisez Karma:

J’ai fait exactement comme il est mentionné dans la réponse de @ wmnitin, mais l’erreur était toujours là. Lorsque vous utilisez “ng serve” au lieu de “karma start”, cela fonctionne！