Question

当我使用双向绑定[（ngModel）]

时，我收到了此消息

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

我知道导入FormsModule是为了解决这个问题，因为很多人都来到这里。但是，我确实导入了FormsModule，但它没有帮助，问题仍然存在

我的代码肯定还有其他问题。你能脱光吗？这是我的app.module.ts

＆＃13;

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 { 

}

＆＃13;

这是我的app.routing.module.ts

＆＃13;

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 {

}

＆＃13;

这是我的HTML

＆＃13;

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

＆＃13;

我在这里附上我的源代码，我使用的是angular-cli source

Answer 1

您需要将FormsModule添加到您使用其指令的模块中的导入：

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

Answer 2

如果你想使用比你需要添加的反应形式：ReactiveFormsModule

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

Angular 2：模板解析错误：无法绑定到＆＃39; ngModel＆＃39;因为它不是“输入”的已知属性。

2 个答案: