Ich versuche, dynamische Formulare in Angular 2 zu implementieren. Ich habe den dynamischen Formularen zusätzliche Funktionen wie Löschen und Abbrechen hinzugefügt. Ich habe diese 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 funktioniert, aber nicht in meinem lokalen System.
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();
}
}
Antworten:
Wenn Sie eine schnelle Lösung gefunden haben, aktualisieren Sie Ihren @ NgModule-Code folgendermaßen:
Quelle: Kann nicht an 'ngModel' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist.
quelle
FormsModule
das gleiche importieren müssen, in demNgModule
Sie Ihre Komponente deklariert haben. Das einfache Sprichwort "Lassen Sie Ihr NgModule so aussehen" ist keine sehr gute Antwort.Damit ngModel bei Verwendung von AppModules (NgModule) funktioniert, müssen Sie FormsModule in Ihr AppModule importieren.
So was:
quelle
Nach dem Upgrade auf RC5 ist ein ähnlicher Fehler aufgetreten. dh Winkel 2: Kann nicht an 'ngModel' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist.
Der Code in 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 ein bahnbrechender Wechsel von RC4 zu RC5.
Diese Seite erläutert die Migration von RC4 zu RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
Ich hoffe, dies behebt den Fehler, den Sie erhalten, und hilft Ihnen, in die richtige Richtung zu gehen.
Kurz gesagt, ich musste ein NGModule in app.module.ts erstellen:
Ich habe dann main.ts geändert, um das Modul zu verwenden:
Natürlich musste ich auch die Abhängigkeiten in package.json aktualisieren. Hier sind meine Abhängigkeiten von package.json. Zugegeben, ich habe sie zusammen aus anderen Quellen (vielleicht den Beispielen für ng docs) gehumpelt, sodass Ihr Kilometerstand variieren kann:
Ich hoffe das hilft besser. :-)
quelle
Sie sollten auch die fehlenden hinzufügen.
quelle
Sie müssen nur
FormsModule
dieFormsModule
in Ihreapp.module.ts
Datei hinzufügen und importieren .Fügen Sie einfach die beiden oben genannten Zeilen in Ihre
app.module.ts
. Es funktioniert gut.quelle
Sie müssen FormsModule in Ihren @ NgModule Decorator importieren. @ NgModule ist in Ihrer Datei moduleName.module.ts vorhanden.
quelle
Schritt zu folgen
1. Öffnen Sie Ihreapp.module.ts
Datei..
2. Hinzufügenimport { FormsModule } from '@angular/forms';
.
3. Fügen SieFormsModule
zuimports
alsimports: [ BrowserModule, FormsModule ],
.
Das Endergebnis wird so aussehen
quelle
Um verwenden zu können,
'ngModule'
muss das'FormsModule'
(von@angular/forms
) Ihremimport[]
Array imAppModule
(sollte in einem CLI-Projekt standardmäßig vorhanden sein) hinzugefügt werden .quelle
Importieren Sie zuerst FormsModule aus Angular Lib und deklarieren Sie es unter NgModule im Import
quelle
Sie müssen @ Angular / Forms-Abhängigkeit in Ihr Modul importieren.
Wenn Sie npm verwenden, installieren Sie die Abhängigkeit:
Importieren Sie es in Ihr Modul:
Und wenn Sie SystemJs zum Laden von Modulen verwenden
Jetzt können Sie [(ngModel)] für zwei Arten der Datenbindung verwenden.
quelle
Aus irgendeinem Grund konnte mein Problem in Angular 6 durch einfaches Importieren des FormsModule nicht behoben werden. Was mein Problem schließlich behoben hat, war das Hinzufügen
quelle
Nehmen wir an, Ihre alte app.module.ts sieht möglicherweise ähnlich aus:
Importieren Sie nun FormsModule in Ihre app.module.ts
http://jsconfig.com/solution-cant-bind-ngmodel-since-isnt-known-property-input/
quelle
Diese Antwort kann Ihnen helfen, wenn Sie Karma verwenden:
Ich habe genau das getan, was in der Antwort von @ wmnitin erwähnt wurde, aber der Fehler war immer da. Wenn Sie "ng serve" anstelle von "karma start" verwenden, funktioniert es!
quelle
Es wird im Angular-Tutorial beschrieben: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule
Sie müssen es importieren
FormsModule
und zu Importen in Ihrer@NgModule
Deklaration hinzufügen .quelle