ngModel 在 Angular4 中不起作用

Posted 2023-03-13

【中文标题】ngModel 在 Angular4 中不起作用

【英文标题】：ngModel not working in Angular4

【发布时间】：2017-12-01 07:36:48

【问题描述】：

我正在从official site 学习 Angular 4，并与 2-way data binding through ngModel 一起学习。但是，一旦我将 [(ngModel)] 添加到我的组件模板中，我的应用程序就会停止工作，即使 FormsModule 已导入到 module.ts 文件中。组件未加载。 我正在使用 Visual Studio Code。 这是我的 app.component.ts

import  Component  from '@angular/core';

    export class Hero 
      id: number;
      name: string;
    



    @Component(
      selector: 'app',
      template: `
      <h1> title </h1>
      <h2>hero.name details!</h2>
      <div><label>Id:</label> hero.id </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected
          transition: padding 0.3s;
          color: mediumseagreen;
        
      `]
    )

    export class AppComponent 
      title = 'Tour Of Heroes';

     hero:Hero = 
       id:1,
       name:"Mr. Invisible"
     ;
      

这是 app.module.ts

import  FormsModule  from '@angular/forms';
import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';

    import  AppComponent, Hero  from './app.component';

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

AppComponent 没有加载，只是显示

加载中...

【问题讨论】：

错误是什么？

你能显示错误信息和一些代码吗？

@Sajeetharan：我也遇到了同样的错误。页面只是保持空白。命令行上没有错误。在 javascript 控制台（在 Chrome 中）中，它显示“无法绑定到 'ngModel'，因为它不是 'input' 的已知属性。”

对于因此错误而来到这里的任何其他人：本教程解释了错误以及如何修复它。您只需继续学习本教程即可修复此错误。

查看这个帖子***.com/questions/43298011/…

【参考方案1】：

import  FormsModule  from '@angular/forms';
import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';

    import  AppComponent, Hero  from './app.component';

    @NgModule(
      declarations: [
        AppComponent

      ],
      imports: [
        BrowserModule,
        FormsModule  // forms module should be in imports not in declarations
      ],
      providers: [],
      bootstrap: [AppComponent]
    )
    export class AppModule   

【讨论】：

@Michael 我猜那行代码有注释，Forms Module Import 应该修复它。

【参考方案2】：

除了模块声明的imports 部分需要FormsModule 之外，您还必须使用form 标记或ngForm 指令来启用ngModel 功能。

不用也可以用独立控件来使用ngModel这样的：

 <input [(ngModel)]="variable" #ctrl="ngModel" >

来源：Angular documentation

【讨论】：

很好的答案！比其他只有代码的要好得多。

【参考方案3】：

// add the import in module and add FormModule in import:
import  NgModule  from '@angular/core'
 imports: [
    BrowserModule,
   // add FormModule in import
    FormsModule
]

【参考方案4】：

import  FormsModule  from '@angular/forms';

然后在@NgModule()imports:[FormsModule]和其他工作人员一起

【参考方案5】：

正如其他人指出的那样，导入 FormsModule 很重要（例如，在您的 app.module.ts 文件中。）在这个特定问题中，导入部分中缺少它。

但是我添加了这个答案是为了警告你我不时遇到的其他事情。

如果您只使用 ngModel 独立，而在某处没有表单，则不必为输入指定 name。

<input ... [(ngModel)]="model.something"`>

但是当你在表单中使用它时，name 属性就变成了强制性的！

<form>
  <input ... name="something" [(ngModel)]="model.something"`>
</form>

它实际上在文档中：

在标签中使用 ngModel 时，您还需要提供一个 name 属性，以便控件可以使用该名称注册到父窗体。

如果你错过它，它根本不会显示任何错误，它只是不起作用。

【参考方案6】：

双向绑定

在 app.module.ts 中

从“@angular/forms”导入 FormsModule ；

进口：[ 表单模块 ],

【参考方案7】：

    import  FormsModule  from '@angular/forms';

请注意，如果您在自定义模块中存在的组件中使用 [(ngModel)]，则必须将此行添加到您的 custom.module 而不是 app.module。

在这种情况下，通过将此行添加到 app.module 没有任何改变，您仍然会看到错误。

【参考方案8】：

添加 import NgModule from '@angular/core';在 app-routing.module.ts 文件中。 确保 从'@angular/core'导入 NgModule ； 从“@angular/forms”导入 FormsModule ；在 app.module.ts 中可用

进口：[ 浏览器模块， 表单模块， AppRoutingModule]