wake-up-neo.com

Angular 2: Fehler beim Parsing von Vorlagen: Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist

Ich habe diese Nachricht erhalten, als ich die bidirektionale Bindung [(ngModel)] verwendete.

Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'.

Ich verstehe, dass das Importieren des FormsModule vermutlich dieses Problem behebt, da viele Leute hier sind. Ich hatte jedoch das FormsModule importiert, aber es hilft nicht, das Problem ist immer noch da

Auf jeden Fall stimmt etwas nicht mit meinem Code. Können Sie ein Licht werfen. Hier ist mein app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { ValidationModule } from './validation/validation.module';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.module.routing';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ValidationModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

}

hier ist mein app.routing.module.ts

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'

import { Home1Component } from './home1.component';
import { Home2Component } from './home2.component';

const appRoutes = [
  { path: 'home1', component: Home1Component },
  { path: 'home2', component: Home2Component },
  { path: 'validation', loadChildren: './validation/validation.module#ValidationModule'}
];

@NgModule({
    declarations:[
        Home1Component,
        Home2Component
    ],
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports:[
        RouterModule
    ]
})

export class AppRoutingModule {

}

und hier ist mein html

<h1> home 1 </h1>
<form>
    <input [(ngModel)]="currentHero.name">
    <button type="button" (click)="onOkClicked()">Ok</button>
</form>

Ich füge meinen Quellcode hier ein, ich verwende eckig-cli source

angular
8
khoailang

wenn Sie reaktive Formulare verwenden möchten, müssen Sie Folgendes hinzufügen: ReactiveFormsModule

@NgModule({
    declarations:[
        Home1Component,
        Home2Component
    ],
    imports: [
        RouterModule.forRoot(appRoutes),
        ReactiveFormsModule, 
    ],
    exports:[
        RouterModule
    ]
})
2
Yoav Schniederman

Sie müssen FormsModule zu Importen in dem Modul hinzufügen, in dem Sie ihre Direktiven verwenden:

@NgModule({
    declarations:[
        Home1Component,
        Home2Component
    ],
    imports: [
        RouterModule.forRoot(appRoutes),
        FormsModule, // <<<=== missing
    ],
    exports:[
        RouterModule
    ]
})
5
Günter Zöchbauer