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

12 回答

• 0

  如果您使用Karma，这个答案可能对您有所帮助：

  我完全按照@ wmnitin的答案提到的那样做，但错误始终存在 . 当使用“ng serve”而不是“karma start”时，它可以工作！

  回复于 2024-05-18T12:42:23+08:00
• 12

  为了在使用AppModule（NgModule）时使ngModel工作，您必须在AppModule中导入FormsModule .

  像这样：

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

  回复于 2024-05-18T12:42:23+08:00
• 7

  升级到RC5后我遇到类似的错误;即Angular 2：无法绑定到'ngModel'，因为它不是'input'的已知属性 .

  Plunker上的代码显示您使用Angular2 RC4，但https://angular.io/docs/ts/latest/cookbook/dynamic-form.html的示例代码使用的是NGModule，它是RC5的一部分 . NGModules是从RC4到RC5的重大变化 .

  此页面介绍了从RC4到RC5的迁移：https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

  我希望这可以解决您所遇到的错误，并帮助您朝着正确的方向前进 .

  简而言之，我必须在app.module.ts中创建一个NGModule：

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

  然后我改变main.ts来使用模块：

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

  当然，我还需要更新package.json中的依赖项 . 这是我从package.json的依赖项 . 不可否认，我已经从其他来源（也许是ng docs示例）中将它们混在一起，因此您的里程可能会有所不同：

  ...
  "dependencies": {
      "@angular/common": "2.0.0-rc.5",
      "@angular/compiler": "2.0.0-rc.5",
      "@angular/core": "2.0.0-rc.5",
      "@angular/forms": "0.3.0",
      "@angular/http": "2.0.0-rc.5",
      "@angular/platform-browser": "2.0.0-rc.5",
      "@angular/platform-browser-dynamic": "2.0.0-rc.5",
      "@angular/router": "3.0.0-rc.1",
      "@angular/router-deprecated": "2.0.0-rc.2",
      "@angular/upgrade": "2.0.0-rc.5",
      "systemjs": "0.19.27",
      "core-js": "^2.4.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.15",
      "bootstrap": "^3.3.6"
    },
  ...
  

  我希望这会有所帮助 . :-)

  回复于 2024-05-18T12:42:23+08:00
• 255

  步骤跟随
  1.打开 app.module.ts 文件 .
  .
  2.添加 import { FormsModule } from '@angular/forms';
  .
  3.将 FormsModule 添加到 imports 作为 imports: [ BrowserModule, FormsModule ],
  .

  最终结果将如下所示

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

  回复于 2024-05-18T12:42:23+08:00
• 2

  首先从angular lib和NgModule导入FormsModule在导入中声明它

  import { FormsModule } from '@angular/forms';
      @NgModule({
        declarations: [
          AppComponent,
          ],
        imports: [
          BrowserModule,
          FormsModule
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
  

  回复于 2024-05-18T12:42:23+08:00
• 4

  您需要将@ angular / forms依赖项导入模块 .

  如果您使用的是npm，请安装依赖项：

  npm install @angular/forms --save
  

  将其导入您的模块：

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

  如果您使用SystemJs加载模块

  '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
  

  现在您可以使用[（ngModel）]两种方式进行数据绑定 .

  回复于 2024-05-18T12:42:23+08:00
• 8

  您需要在@NgModule装饰器中导入FormsModule，而@NgModule存在于moduleName.module.ts文件中 .

  import { FormsModule } from '@angular/forms';
  @NgModule({
     imports: [
        BrowserModule,
        FormsModule
     ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
   })
  

  回复于 2024-05-18T12:42:23+08:00
• 51

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

  您还应该添加缺少的那些 .

  回复于 2024-05-18T12:42:23+08:00
• 4

  为了能够使用 'ngModule' ，需要将 'FormsModule' （来自 @angular/forms ）添加到 AppModule 中的 import[] 数组中（默认情况下应该在CLI项目中） .

  回复于 2024-05-18T12:42:23+08:00
• 2

  在Googling中找到此解决方案，更新您的@NgModule代码，如下所示：

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

  资料来源：Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

  回复于 2024-05-18T12:42:23+08:00
• 3

  您只需添加 FormsModule 并在 app.module.ts 文件中导入 FormsModule .

  import { FormsModule } from '@angular/forms';
  
  imports: [
      BrowserModule, FormsModule 
  ],
  

  只需在 app.module.ts 中添加以上两行即可 . 它工作正常 .

  回复于 2024-05-18T12:42:23+08:00
• 0

  由于Angular 6中的某些原因，只是导入FormsModule并没有解决我的问题 . 最后解决我的问题的是添加

  import { CommonModule } from '@angular/common';
  
  @NgModule({
    imports: [CommonModule],
  })
  
  export class MyClass{
  }
  

  回复于 2024-05-18T12:42:23+08:00