无法绑定到“ngModel”，因为它不是“input”的已知属性

为了能够对表单输入使用双向数据绑定，您需要在 Angular 模块中导入包。FormsModule

有关更多信息，请参阅此处的 Angular 2 官方教程和表单的官方文档。

是的，就是这样。在app.module.ts文件中，我刚刚添加了：

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

我从 RC1 升级到 RC5 并收到此错误。

我完成了迁移（引入一个新文件，更改以包含新版本和缺少的模块，最后根据 Angular2 快速入门示例相应地更改我的启动）。app.module.tspackage.jsonmain.ts

我做了一个，然后一个确认安装的版本是正确的，仍然没有运气。npm updatenpm outdated

我最终完全擦除了文件夹并重新安装 - 瞧！问题解决了。node_modulesnpm install

假设您已经创建了一个新的 NgModule，例如专门用于处理您的身份验证需求，请确保也导入该 AuthModule。AuthModuleFormsModule

如果您将使用 only in ，则无需在 default 中导入 。FormsModuleAuthModuleFormModuleAppModule

所以像这样的东西在：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 { }

如果您不在其他任何地方使用，请忘记导入。AppModuleFormsModule

您需要遵循两个步骤才能消除此错误：

1. 在应用模块中导入 FormsModule
2. 在装饰器中将其作为导入@NgModule值传递

基本上，文件app.module.ts应如下所示：

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

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

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

您还应该告诉模块加载器加载 .进行更改后，我的方法属性如下所示：ng.forms.FormsModuleimportsNgModule

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

在应用程序模块中导入 FormsModule。

它会让你的应用程序运行良好。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

如果有人在应用接受的解决方案后仍然遇到错误，这可能是因为您有一个单独的模块文件，用于要在输入标记中使用 ngModel 属性的组件。在这种情况下，请在组件的module.ts文件中应用接受的解决方案。

如果您在正确导入 FormsModule 后仍然收到错误，请检查您的终端或（Windows 控制台），因为您的项目没有编译（因为另一个错误可能是任何东西），并且您的解决方案尚未反映在您的浏览器中！

就我而言，我的控制台出现以下不相关的错误：

属性“retrieveGithubUser”在类型“ApiService”上不存在。

我知道这个问题是关于 Angular 2 的，但我使用的是 Angular 4，这些答案都没有帮助。

在 Angular 4 中，语法需要

[(ngModel)]

有时，当您尝试在不同的模块中使用未共享的模块中的组件时，您会收到此错误。

例如，您有 2 个带有 module1.componentA.component.ts 和 module2.componentC.component.ts 的模块，并且您尝试在 module2 中的模板中使用 module1.componentA.component.ts 中的选择器（例如），它会抛出错误，即 someInputVariableInModule1 在 module1.componentA.component.ts 中不可用 - 即使您在 module1.componentA 中。<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">@Input() someInputVariableInModule1

如果发生这种情况，您需要共享 module1.componentA，以便在其他模块中访问。 因此，如果您在 sharedModule 中共享 module1.componentA，则 module1.componentA 将可以在其他模块中使用（在 module1 之外），并且每个导入 sharedModule 的模块都将能够访问其模板中的选择器，并注入声明的变量。@Input()

为了在 Angular 2、4 和 5+ 中使用，您需要从 Angular 表单导入 FormsModule...[(ngModel)]

此外，它位于 GitHub 上 Angular 存储库中表单下的此路径中：

angular / 软件包 / 形式 / src / 指令 / ng_model.ts

对于 AngularJS 开发人员来说，这可能不是一件令人愉快的事情，因为您可以在任何地方随时使用 ng-model，但是当 Angular 尝试分离模块以使用您当时想要使用的任何内容时，ngModel 现在在 FormsModule 中。

此外，如果您使用的是 ReactiveFormsModule，它也需要导入它。

因此，只需查找app.module.ts并确保您已导入...FormsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  // <<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule // <<<< And here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

此外，这些是 FormsModule 中 Angular4 的当前起始注释：ngModel

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

如果你想使用你的输入，而不是在表单中，你可以将它与 and make standalone true...ngModelOptions

[ngModelOptions]="{standalone: true}"

有关更多信息，请查看此处的 Angular 部分中的ng_model。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

对于我的场景，我必须将 [CommonModule] 和 [FormsModule] 都导入到我的模块中

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

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

简单的解决方案：在文件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 { }

我正在使用 Angular 5。

就我而言，我也需要导入 ReactiveFormsModule。

文件app.module.ts（或anymodule.module.ts）：

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

在你愿意使用ngModel的模块中，你必须导入FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

您需要导入 FormsModule。

打开app.module.ts并添加线条

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

和

@NgModule({
    imports: [
       FormsModule
    ],
})

ngModel 来自 FormsModule。在某些情况下，您可能会收到此类错误：

1. 您没有将 FormsModule 导入到声明组件的模块的导入数组中 - 其中使用了 ngModel 的组件。
2. 您已将 FormsModule 导入到一个模块中，该模块继承自另一个模块。在这种情况下，您有两种选择：

• 让 FormsModule 从 modules：module1 和 module2 导入到 import 数组中。作为规则：导入模块不提供对其导入模块的访问。（导入不会继承）

  

• 将 FormsModule 声明到 module1 的导入和导出数组中，以便能够在 model2 中看到它

  

3. （在某些版本中，我遇到了这个问题）您已正确导入 FormsModule，但问题出在输入 HTML 标记上。您必须为输入添加 name 标签属性，并且 [（ngModel）] 中的对象绑定名称必须与 name 属性中的名称相同

   

我正在使用 Angular 7。

我必须导入 ReactiveFormsModule，因为我正在使用 FormBuilder 类来创建响应式表单。

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})

如果此组件位于根模块中，则需要在根模块中导入 FormsModule，即 app.module.ts

请打开app.module.ts

从@angular/forms导入FormsModule

前任：

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

和

@NgModule({
imports: [
   FormsModule
],
})

在你需要导入 ，因为来自 。 请像我分享的以下代码一样修改您的app.module.tsngModuleFormsModulengModelFormsModule

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

有时，即使我们已经导入了 ，和其他相关模块，我们仍然可能会遇到相同的错误。BrowserModuleFormsModule

然后我意识到我们需要按顺序导入它们，这在我的情况下被遗漏了。所以顺序应该是 、 和 。BrowserModuleFormsModuleReactiveFormsModule

根据我的理解，功能模块应该遵循 Angular 的基本模块。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

将 FormsModule 导入要使用 [（ngModel）] 的模块中

在文件 app.module 中导入 FormModule

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

ngModel 应该从 @angular/forms 导入，因为它是 FormsModule 的一部分。所以我建议你改变你app.module.ts如下：

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

我遇到了同样的问题，原因是我在我的 .我导入了我的 ，但我忘了将其添加到数组中。MenuComponentMenuComponent in app.module.tsdeclarations

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

您需要导入 FormsModule。

#Open app.module.ts
#add the lines

import { FormsModule } from '@angular/forms';
and

@NgModule({
    imports: [
       FormsModule   <--------add this 
    ],
})


if you are using reactive form then also added  ReactiveFormsModule

要解决 我们必须包含在文件中以避免 Angular 应用程序中的问题。FormModuleapp.module.tsCan't bind to ngModel as it isn't a known property of the input

步骤如下：

打开并添加导入行app.module.ts

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

并添加到FormsModuleimports

@NgModule({
    imports: [
       FormsModule
    ],
})

图 1.0 （app.module.ts文件）

您需要在app.module.ts中导入 FormsModule 并添加行

 import { FormsModule } from '@angular/forms';
    @NgModule({
      imports: [
       
        FormsModule
      ]
    })

使用 FormsModule 中声明的 ngModel 指令，可以将模板驱动窗体中的控件绑定到数据模型中的属性。当您使用双向数据绑定的语法 [（ngModel）] 包含指令时，Angular 可以跟踪控件的值和用户交互，并使视图与模型保持同步。