kątowe 2: Szablon błędów analizy: nie można wiązać „ngModel”, ponieważ nie jest znana własność „wejścia”

Question

Dostałem tę wiadomość, gdy użyłem wiązania [(ngModel)] dwukierunkowego

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

Rozumiem, że importowanie FormsModule ma na celu naprawienie tego problemu, ponieważ wiele osób przyszło tutaj. Miałem jednak zaimportowany moduł FormsModule, ale to nie pomaga, problem nadal istnieje

Zdecydowanie jest coś jeszcze, co popsuło mój kod. Czy możesz rzucić światło? Oto moje 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 { 
 

 
}

tutaj jest moje 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 { 
 

 
}

i tu jest mój html

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

załączam mój kod źródłowy tutaj używam kątowe-cli source

Answer 1

jeśli chcesz użyć formularzy reaktywnych niż potrzebujesz dodać: ReactiveFormsModule

Answer 2

Trzeba dodać FormsModule do importu w module gdzie używasz swoich dyrektyw :

@NgModule({ 
    declarations:[ 
     Home1Component, 
     Home2Component 
    ], 
    imports: [ 
     RouterModule.forRoot(appRoutes), 
     FormsModule, // <<<=== missing 
    ], 
    exports:[ 
     RouterModule 
    ] 
})