Winkel 2: Kann nicht an 'ngModel' gebunden werden, da dies keine bekannte Eigenschaft von 'input' ist.

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();
  }
}

Wenn Sie eine schnelle Lösung gefunden haben, aktualisieren Sie Ihren @ NgModule-Code folgendermaßen:

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' gebunden werden, 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. 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:

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 zusammen aus anderen Quellen (vielleicht den Beispielen für ng docs) gehumpelt, sodass Ihr Kilometerstand variieren kann:

...
"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 FormsModuledie FormsModulein Ihre app.module.tsDatei hinzufügen und importieren .

import { FormsModule } from '@angular/forms';

imports: [
    BrowserModule, FormsModule 
],

Fügen Sie einfach die beiden oben genannten Zeilen in Ihre app.module.ts. 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 ]
 })

Schritt zu folgen

.

.

.

Das Endergebnis wird so aussehen

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

Um verwenden zu können, 'ngModule'muss das 'FormsModule'(von @angular/forms) Ihrem import[]Array im AppModule(sollte in einem CLI-Projekt standardmäßig vorhanden sein) hinzugefügt werden .

Importieren Sie zuerst FormsModule aus Angular Lib und deklarieren Sie es unter NgModule im Import

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

Sie müssen @ Angular / Forms-Abhängigkeit in Ihr Modul importieren.

Wenn Sie npm verwenden, installieren Sie die Abhängigkeit:

npm install @angular/forms --save

Importieren Sie es in Ihr 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 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

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
})

export class MyClass{
}

Nehmen wir an, Ihre alte app.module.ts sieht möglicherweise ähnlich 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 { }

Importieren Sie nun FormsModule in Ihre 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/

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！

Es wird im Angular-Tutorial beschrieben: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule

Sie müssen es importieren FormsModuleund zu Importen in Ihrer @NgModuleDeklaration hinzufügen .

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    DynamicConfigComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})