't bind to ' ngModel ' since it isn' t 'input'的已知属性-Java 学习之路

779

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

22 回答

3

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

回复于 2024-04-25T05:21:38+08:00

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

在您的应用模块中导入FormsModule
将其作为@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 { }

希望能帮助到你

回复于 2024-04-25T05:21:38+08:00

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

回复于 2024-04-25T05:21:38+08:00

1142

当我第一次做这个教程时，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);

回复于 2024-04-25T05:21:38+08:00

22

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

我完成了我的迁移（引入了一个新的 app.module.ts 文件，更改 package.json 以包含新版本和缺少的模块，最后根据Angular2 quick start example更改我的 main.ts 以相应地启动） .

我做了 npm update 然后 npm outdated 确认安装的版本是正确的，仍然没有运气 .

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

回复于 2024-04-25T05:21:38+08:00

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

回复于 2024-04-25T05:21:38+08:00

12
投掷这可能有助于某人 .

假设您已经创建了一个新的NgModule，比如 AuthModule 专门用于处理您的Auth需求，请确保在该AuthModule too 中导入 FormsModule .

如果您将在 AuthModule 中仅使用 FormsModule ，那么您将无需导入 FormModule IN默认 AppModule

所以在_151834中这样的事情：
```
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 .
回复于 2024-04-25T05:21:38+08:00

要在 Angular 2 ， 4 ＆ 5+ 中使用 [(ngModel)] ，您需要从Angular格式导入 FormsModule ...

此外，它在 github 中的Angular repo中的表单下：

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

可能这对 AngularJs developers 来说并不是一件非常愉快的事情，因为你可以随时随地使用 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!
 */

如果您想使用输入而不是表单，可以将其与 ngModelOptions 一起使用并单独使用 true ...

[ngModelOptions]="{standalone: true}"

有关详细信息，请查看Angular部分中的 ng_model here

回复于 2024-04-25T05:21:38+08:00

431

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

***Example 1***
import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

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

回复于 2024-04-25T05:21:38+08:00

18

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

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

回复于 2024-04-25T05:21:38+08:00
6
您需要导入FormsModule

打开 app.module.ts

并添加行
```
import { FormsModule } from '@angular/forms';
```
和
```
@NgModule({
imports: [
   FormsModule
],
})
```
回复于 2024-04-25T05:21:38+08:00
3
ngModel 来自FormsModule . 在某些情况下，您可能会收到此类错误：
- 您没有将FormsModule导入到声明组件的模块的导入数组中，使用ngModel的组件 .
- 您已将FormsModule导入到一个继承另一个模块的模块中 . 在这种情况下，您有两个选择：
- 让FormsModule从两个模块导入到导入数组中：module1和module2 . As rule: Importing a module does NOT provide access to its imported modules.(Imports are not inherited)
- 将FormsModule声明为module1中的导入和导出数组，以便能够在model2中看到它
- （在某些版本中我遇到了这个问题）您已正确导入FormsModule但问题出在输入HTML标记上 . 您必须为输入添加名称标记属性，并且[（ngModel）]中的对象绑定名称必须与name属性中的名称相同
回复于 2024-04-25T05:21:38+08:00
19

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

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

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

回复于 2024-04-25T05:21:38+08:00
175
这适用于使用纯JavaScript而不是Type Script的人 . 除了在页面顶部引用表单脚本文件之外，如下所示
```
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
```
你还应该告诉模块加载器加载 ng.forms.FormsModule . 进行更改后， NgModule 方法的 imports 属性如下所示

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

快乐的编码！
回复于 2024-04-25T05:21:38+08:00
6

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

回复于 2024-04-25T05:21:38+08:00

在您的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 { }

回复于 2024-04-25T05:21:38+08:00

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

回复于 2024-04-25T05:21:38+08:00

2

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

回复于 2024-04-25T05:21:38+08:00

是的，就是它，在app.module.ts中，我刚才补充道：

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

[...]

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

回复于 2024-04-25T05:21:38+08:00

我正在使用Angular 5 .

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

app.module.ts（或anymodule.module.ts）

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

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

回复于 2024-04-25T05:21:38+08:00

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

在Angular 4中，语法需要
```
[(ngModel)]
```
希望这可以帮助 .
回复于 2024-04-25T05:21:38+08:00
12
如果您需要首先使用 [(ngModel)] ，您需要在 app.module.ts 中导入 FormsModule 然后添加导入列表 . 像这样的东西：

app.module.ts
- import import {FormsModule} from "@angular/forms";
- 添加进口 imports: [ BrowserModule, FormsModule ],
app.component.ts
- 示例： <input type="text" [(ngModel)]="name" >
- 然后 <h1>your name is: {{name}} </h1>
回复于 2024-04-25T05:21:38+08:00

't bind to ' ngModel ' since it isn' t 'input'的已知属性

22 回答

相关问题