无法绑定到'ngModel',因为它不是'input'的已知属性

Question

启动Angular应用程序时出现以下错误,即使未显示该组件也是如此.

我必须注释掉,以便我的应用程序正常运行.

    zone.js:461 Unhandled Promise rejection: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <div>
            <label>Created:</label>
            <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
        </div>
    </div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

我正在看着英雄的掠夺者,但我没有看到任何区别.

这是组件文件:

    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";
    }

Answer 1

是的,就是它,在app.module.ts中,我刚刚补充说:

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

[...]

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

Answer 2

为了能够对表单输入使用双向数据绑定,您需要FormsModule在Angular模块中导入包.有关更多信息,请参阅此处的Angular 2官方教程和表单的官方文档

Answer 3

对于使用[(ngModel)]在角2,4&5+,你需要导入FormsModule从角形态...

它也是在github中Angular repo中的表单下的这条路径中:

angular/packages/forms/src/directives/ng_model.ts

也许这不是一个非常高兴的AngularJs开发者,你可以使用NG-模型之前的任何时间无处不在,但作为角试图单独的模块来使用任何你想你想的时候使用,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 ngModel中Angular4的当前开始注释:

/**
 * `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!
 */

如果你想使用你的输入,而不是表格,你可以使用它ngModelOptions并使其独立真实 ......

[ngModelOptions]="{standalone: true}"

有关详细信息,请在此处查看Angular部分中的ng_model

Answer 4

您需要导入FormsModule

打开app.module.ts

并添加行

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

和

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

Answer 5

在要使用 [(ngModel)] 的那些模块中导入 FormsModule

Answer 6

投掷这可能会帮助某人.

假设你已经创建了一个新的NgModule,说AuthModule专门处理您的验证需求,确保导入FormsModule该AuthModule 过.

如果您将FormsModule在AuthModule当时使用ONLY,则无需导入FormModuleIN默认值AppModule

所以这样的事情在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 { }

AppModule如果你不使用FormsModule其他任何地方,请忘记导入.

Answer 7

您需要导入FormsModule.

打开app.module.ts并添加行

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

和

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

Answer 8

简单的 灵魂:在app.module.ts

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

Answer 9

要摆脱此错误,您需要遵循两个步骤

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

希望能帮助到你

Answer 10

您需要导入FormsModule您在根模块如果此组件是根，即app.module.ts

请打开app.module.ts

从@ angular / forms导入FormsModule

例如：

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

和

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

Answer 11

在您的app模块中导入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 { }

Answer 12

如果你需要使用[(ngModel)]第一你需要导入FormsModule的app.module.ts,然后在进口的列表中添加.像这样的东西:

app.module.ts

1. 进口 import {FormsModule} from "@angular/forms";
2. 添加进口 imports: [ BrowserModule, FormsModule ],

app.component.ts

1. 例: <input type="text" [(ngModel)]="name" >
2. 然后 <h1>your name is: {{name}} </h1>

Answer 13

我正在使用Angular 7

我必须导入ReactiveFormsModule，因为我正在使用FormBuilder类创建反应形式。

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

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

Answer 14

在文件app.module 中导入FormModule

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

Answer 15

我正在使用Angular 5.

就我而言,我也需要导入RactiveFormsModule.

app.module.ts(或anymodule.module.ts)

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

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

Answer 16

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

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

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

Answer 17

如果有人在应用接受的解决方案后仍然出现错误,则可能是因为您在组件中有一个单独的模块文件,您要在其中使用输入标记中的ngModel属性.在这种情况下,也可以在组件的module.ts文件中应用已接受的解决方案.

Answer 18

如果您在正确导入FormsModule后仍然出现错误,请检查您的终端或(Windows控制台),因为您的项目没有编译(因为可能是其他任何错误)并且您的解决方案没有反映在您的浏览器中!

在我的情况下,我的控制台有以下无关的错误:类型'ApiService'上不存在属性'retrieveGithubUser'.

Answer 19

我知道这个问题是关于Angular 2的,但我在Angular 4上,这些答案都没有帮助.

在Angular 4中,语法需要

[(ngModel)]

希望这可以帮助.

Answer 20

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

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

[...]

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

Answer 21

在模块中,您愿意使用ngModel,您必须导入FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

Answer 22

您需要导入 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

Answer 23

ngModel来自FormsModule.在某些情况下,您可能会收到此类错误:

1. 您没有将FormsModule导入到声明组件的模块的导入数组中,使用ngModel的组件.
2. 您已将FormsModule导入到一个继承另一个模块的模块中.在这种情况下,您有两个选择:
   • 让FormsModule从两个模块导入到导入数组中:module1和module2.作为规则:导入模块不提供对其导入模块的访问.(不继承导入)

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

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

   

Answer 24

在ngModule您需要导入的时候FormsModule，因为ngModel是来自FormsModule。请像我分享的以下代码一样修改您的app.module.ts

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

Answer 25

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

Answer 26

ngModel是FormsModule的一部分。并且应该从@ angular / forms导入以与ngModel一起使用。

请按以下方式更改app.module.ts：

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

[...]

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

Answer 27

对于我的场景,我必须将[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 { }

Answer 28

您需要导入FormsModule

打开app.module.ts

并添加行

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

和

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

Answer 29

有时，如果我们已经导入了BrowserModule，FormsModule但我遇到了同样的错误，但其他相关的模块，则我意识到我们需要将它们导入Order中，在我的情况下，我错过了它。所以顺序应该是这样 BrowserModule，FormsModule，ReactiveFormsModule。

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

希望这可以帮助某人.. :)

Answer 30

我遇到了同样的问题，原因是我在我的MenuComponent. 我导入了我的MenuComponent in app.module.ts，但我忘记声明它。

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

Answer 31

这适用于使用普通JavaScript而不是Type Script的人们。除了引用页面顶部的表单脚本文件外，如下所示

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

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

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

编码愉快！

Answer 32

当您尝试在不同模块中使用未共享的模块中的组件时,有时会出现此错误.

例如,你有2个模块与module1.componentA.component.ts和module2.componentC.component.ts,你尝试在module2内的模板中使用module1.componentA.component.ts中的选择器(例如<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">),它会抛出someInputVariableInModule1在module1.componentA.component.ts中不可用的错误 - 即使你@Input() someInputVariableInModule1在module1.componentA中也有.

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

Answer 33

对我来说，问题是，我忘记在模块的声明数组中声明该组件。

@NgModule({
 declarations: [yourcomponentName]
})

Answer 34

实际上在大多数情况下FormsModule已经进口了。所以你必须做的是你必须确保

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

Answer 35

当我第一次做这个教程时，main.ts 看起来与现在略有不同。它看起来非常相似，但请注意不同之处（最上面的是正确的）。

正确的：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

旧教程代码：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Answer 36

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

我完成了迁移（基于Angular2快速入门示例app.module.ts，引入了一个新文件，更改package.json为包括新版本和缺少的模块，最后更改main.ts为相应地启动）。

我先做了一次npm update，然后再一次npm outdated确认安装的版本正确，但是仍然没有运气。

我最终完全清除了该node_modules文件夹，然后重新安装npm install-Voila！问题解决了。

Answer 37

对于 Angular 2 的任何版本，您都需要在 app.module.ts 文件中导入 FormsModule，它会解决问题。

Answer 38

结合所有可能的解决方案：

1. 检查您输入的内容是否正确。它应该是“[(ngModel)]”，“M”大写。
2. 检查你的 TS 文件中是否有 import FormsModule。如果没有，你可以这样做：

在 app.module.ts 中，添加以下行

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

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

Answer 39

Angular 14+ 使用独立组件

将表单组件直接导入到独立组件中：

import { FormsModule, NgForm } from '@angular/forms';
import { NgFor } from "@angular/common";

@Component({
  selector: 'app-table-view',
  standalone: true,
  imports: [ 
    NgFor,
    FormsModule
    ],  
  templateUrl: './table-view.component.html',
  styleUrls: ['./table-view.component.css']
})