it-swarm.com.de

Winkel 2: Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist

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

 enter image description here

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

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

264
wmnitin

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 {}
51
Radosvet Petrov

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. :-) 

12
jackfrosch
import {FormControl,FormGroup} from '@angular/forms';

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

Sie sollten auch die fehlenden hinzufügen.

9
Mertcan Diken

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.

7
kirankumar

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 ]
 })
4
Jawla

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]
    })
3
Gajender Singh

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).

3
Nisarg Patil

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.

2
Yacine

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{
}
0
Andy Braham

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/

0
Siddhartha

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]
})
0
K. Gol

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!

0
luohf07