我的组件中有一个简单的输入,它使用[(ngModel)]:

<input type="text" [(ngModel)]="test" placeholder="foo" />

当我启动应用程序时,即使没有显示组件,也会出现以下错误。

zone.js:461未处理的Promise拒绝:模板解析错误:无法绑定到“ngModel”,因为它不是“input”的已知属性。

以下是组件。ts:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})
    
export class InterventionDetails
{
   @Input() intervention: Intervention;
    
   public test : string = "toto";
}

当前回答

这是为那些使用普通JavaScript而不是Type Script的人准备的。除了引用页面顶部的表单脚本文件外,如下所示:

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

您还应该告诉模块加载器加载ng.forms.FormsModule。进行更改后,NgModule方法的imports属性如下所示:

导入:[ng.platformBrowser.BrowserModule,ng.forms.FormsModule],

其他回答

我面临同样的问题,原因是我在MenuComponent中使用ngModel。我在app.module.ts中导入了MenuComponent,但忘记声明它。

声明MenuComponent解决了我的问题。如下图所示:

假设您已经创建了一个新的NgModule,比如说AuthModule专门用于处理您的身份验证需求,请确保也在该AuthModule中导入FormsModule。

如果您将仅在AuthModule中使用FormsModule,则无需在默认AppModule中导入FormModule。

因此,AuthModule中的内容如下:

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [
    authRouting,
    FormsModule
   ],
  declarations: [
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

然后,如果您在其他任何地方都不使用FormsModule,请忘记在AppModule中导入。

我使用的是Angular 9,我有一个带有[formGroup]属性的'<form'标记。我还有一个指定按钮的“<input”标记,这导致了[(ngModel)]部分的错误。

我只删除了那个(ngModel)部分就解决了这个错误。

实际上,在大多数情况下,FormsModule已经导入。所以你要做的是确保

组件已正确添加到app.module.ts文件的声明数组中。您应该验证绑定是否拼写正确。正确拼写为[(ngModel)]

简单解决方案:在文件app.module.ts中-

示例1

import {FormsModule} from "@angular/forms";
// Add in imports

imports: [
 BrowserModule,
 FormsModule
 ],

示例2

如果要使用[(ngModel)],则必须在app.module.ts中导入FormsModule:

import { FormsModule  } from "@angular/forms";
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective,
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }