Ich versuche, dynamische Formulare in Angular 2 zu implementieren. Ich habe den dynamischen Formularen weitere Funktionen hinzugefügt, z. B. "Delete" und "Cancel". Ich habe folgende Dokumentation befolgt: https://angular.io/docs/ts /latest/cookbook/dynamic-form.html
Ich habe einige Änderungen am Code vorgenommen. Ich bekomme hier einen Fehler.
Wie mache ich diesen Fehler?
Den vollständigen Code finden Sie hier: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , der im Plunker, aber nicht in meinem lokalen System arbeitet.
HTML Quelltext:
<div>
<form [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<label [attr.for]="question.key">{{question.label}}</label>
<div [ngSwitch]="question.controlType">
<input *ngSwitchCase="'textbox'" [formControlName]="question.key"
[id]="question.key" [type]="question.type" [(ngModel)]="question.value">
<select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" >
<option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option>
</select>
<input *ngSwitchCase="'checkbox'" [(ngModel)]="question.value"
[id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck [ngModelOptions]="{standalone: true}">
</div>
<div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button>
<button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
<button type="button" class="btn btn-default" (click)="clear()">Clear</button>
</div>
</form>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
</div>
Komponentencode:
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<any>[] = [];
form: FormGroup;
payLoad:any;
payLoad2:any;
questiont: QuestionBase<any>;
questiond: QuestionBase<any>;
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.stringify(this.questions));
this.questiond = JSON.parse(JSON.stringify(this.questions));
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
this.payLoad2=this.payLoad;
this.questiont = JSON.parse(JSON.stringify(this.questions));
console.log("Submitted data",this.questions);
}
cancel(){
console.log("Canceled");
this.questions = JSON.parse(JSON.stringify(this.questiont));
}
clear(){
this.questions = JSON.parse(JSON.stringify(this.questiond));
this.questiont = JSON.parse(JSON.stringify(this.questiond));
console.log("Cleared");
this.cdr.detectChanges();
}
}
Um eine schnelle Lösung zu finden, aktualisieren Sie Ihren @NgModule-Code wie folgt:
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 { }
Quelle: Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist
Damit ngModel bei Verwendung von AppModules (NgModule) funktioniert, müssen Sie FormsModule in Ihr AppModule importieren.
So was:
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 {}
Nach dem Upgrade auf RC5 ist ein ähnlicher Fehler aufgetreten. d. h. Angular 2: Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist.
Der Code auf Plunker zeigt Ihnen die Verwendung von Angular2 RC4, der Beispielcode unter https://angular.io/docs/ts/latest/cookbook/dynamic-form.html verwendet NGModule, das Teil von RC5 ist. NGModules ist eine Umstellung von RC4 auf RC5.
Diese Seite erläutert die Migration von RC4 zu RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
Ich hoffe, das behebt den Fehler, den Sie bekommen, und hilft Ihnen, in die richtige Richtung zu gehen.
Kurz gesagt, ich musste ein NGModule in app.module.ts erstellen:
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 { }
Ich habe dann main.ts geändert, um das Modul zu verwenden:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Natürlich musste ich auch die Abhängigkeiten in package.json aktualisieren. Hier sind meine Abhängigkeiten von package.json. Zugegeben, ich habe sie aus anderen Quellen zusammengerollt (vielleicht die ng docs-Beispiele), daher kann Ihre Laufleistung variieren:
...
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "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"
},
...
Ich hoffe das hilft besser. :-)
import {FormControl,FormGroup} from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
Sie sollten auch die fehlenden hinzufügen.
Sie müssen nur FormsModule
hinzufügen und die FormsModule
in Ihre app.module.ts
-Datei importieren.
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule, FormsModule
],
Fügen Sie einfach die beiden obigen Zeilen in Ihren app.module.ts
ein. Es funktioniert gut.
Sie müssen FormsModule in Ihren @NgModule Decorator importieren. @NgModule ist in Ihrer Datei moduleName.module.ts vorhanden.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
Importieren Sie zuerst FormsModule aus der Winkellib-Datei und unter NgModule wurde es beim Importieren deklariert
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
Um 'ngModule'
verwenden zu können, muss der 'FormsModule'
(von @angular/forms
) zu Ihrem import[]
-Array in der AppModule
hinzugefügt werden (sollte standardmäßig in einem CLI-Projekt vorhanden sein).
Sie müssen die @ angle/forms-Abhängigkeit in Ihr Modul importieren.
wenn Sie npm verwenden, installieren Sie die Abhängigkeit:
npm install @angular/forms --save
Importiere es in dein Modul:
import {FormsModule} from '@angular/forms';
@NgModule({
imports: [.., FormsModule,..],
declarations: [......],
bootstrap: [......]
})
Und wenn Sie SystemJs zum Laden von Modulen verwenden
'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
Jetzt können Sie [(ngModel)] für zwei Arten der Datenbindung verwenden.
Aus irgendeinem Grund in Angular 6 konnte mein Problem durch das Importieren des FormsModule nicht behoben werden. Was schließlich mein Problem behoben hat, war das Hinzufügen
import { CommonModule } from '@angular/common';
@NgModule({
imports: [CommonModule],
})
export class MyClass{
}
Nehmen wir an, Ihre alten app.module.ts sehen ungefähr so aus:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Importiere jetzt FormsModule in deine 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 { }
http://jsconfig.com/solution-cant-bind-ngmodel-since-isnt-known-property-input/
Es ist im Angular-Tutorial beschrieben: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule
Sie müssen FormsModule
importieren und in Ihre @NgModule
-Deklaration importieren.
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
DynamicConfigComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
Diese Antwort kann Ihnen helfen, wenn Sie Karma verwenden:
Ich habe genau das gemacht, wie es in @ wmnitins Antwort erwähnt wurde, aber der Fehler war immer da. Wenn Sie "ng serv" anstelle von "karma start" verwenden, funktioniert es!