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

178

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

Geben Sie hier die Bildbeschreibung ein

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();
  }
}
Varun
quelle
Ich habe den gleichen Fehler nach dem Upgrade. Werde hier schreiben, wenn ich finde warum.
Carl Boisvert
1
Okay, für mich ist es verschwunden, als ich das FormsModule in meine NgModule-Deklaration importiert habe. Ich habe jedoch immer noch die Fehlermeldung "AppComponent hat keine Routenkonfiguration". auch wenn ich die routen importiert habe. Aber überprüfen Sie, ob es Ihr Problem behebt.
Carl Boisvert
Dies kann stackoverflow.com/a/49628169/6597375
Deepu Reghunath

Antworten:

282

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.

wmnitin
quelle
15
Ist das noch die richtige Lösung? Alles für mich ist so und trotzdem bekomme ich den Fehler?
FrancescoMussi
2
Ja, es funktioniert immer noch. Sie können auch ReactiveFormsModule anstelle von FormsModule ausprobieren. Bitte posten Sie Ihren Fehler, falls vorhanden.
Wmnitin
1
Tut mir leid. Mein Problem war etwas anderes. Ich habe das hier herausgefunden: stackoverflow.com/questions/39152071/… Danke für die Antwort!
FrancescoMussi
28
Es scheint, dass die eigentliche Antwort darin bestand, dass Sie FormsModuledas gleiche importieren müssen, in dem NgModuleSie Ihre Komponente deklariert haben. Das einfache Sprichwort "Lassen Sie Ihr NgModule so aussehen" ist keine sehr gute Antwort.
WebWanderer
Es funktioniert eigentlich nicht, es muss das ReactiveFormsModule sein
Julius ShadowAspect Flimmel
53

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 {}
Radosvet Petrov
quelle
Sie müssen FormsModule zu Importen in dem Modul hinzufügen, in dem Sie seine Anweisungen verwenden: In allen von ihnen richtig?
Marvin Zumbado
12

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

Jackfrosch
quelle
1
Ich habe die Antwort so bearbeitet, dass sie bestimmte Codebeispiele enthält.
Jackfrosch
10
import {FormControl,FormGroup} from '@angular/forms';

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

Sie sollten auch die fehlenden hinzufügen.

Mertcan Diken
quelle
1
Hallo, in meinem Fall ist dies eine Lösung. Es scheint, dass die Formulargruppe ein wichtiger Teil ist.
Jean Jimenez
8

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.

kirankumar
quelle
4

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

Schritt zu folgen

1. Öffnen Sie Ihre app.module.tsDatei.

.

2. Hinzufügen import { FormsModule } from '@angular/forms';

.

3. Fügen Sie FormsModule zu importsalsimports: [ BrowserModule, FormsModule ],

.

Das Endergebnis wird so aussehen

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

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 .

Nisarg Patil
quelle
3

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

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.

Yacine
quelle
1

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

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/

Siddhartha Mukherjee
quelle
0

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!

luohf07
quelle
0

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