Angular 4 - “可以't bind to ' ngModel ' since it isn' t已知属性'input'”错误

7 回答

• 2

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

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

  ---

  EDIT

  由于存在大量重复问题但问题相同，我正在加强这个答案 .

  有两个可能的原因

  • 缺少 FormsModule ，因此将此添加到您的模块，

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

  • 检查输入标签中 [(ngModel)] 的语法/拼写

  回复于 2024-04-29T01:42:29+08:00
• 0

  这是一个正确的答案 . 你需要导入FormsMoudle

  首先在app.module.ts中

  **

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

  ** app.component.spec.ts中的第二个

  import { TestBed, async } from '@angular/core/testing';
  import { RouterTestingModule } from '@angular/router/testing';
  import { AppComponent } from './app.component';
  import { FormsModule } from '@angular/forms';
  describe('AppComponent', () => {
    beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [
          RouterTestingModule,
          FormsModule
        ],
        declarations: [
          AppComponent
        ],
      }).compileComponents();
    }));
  

  最诚挚的问候和希望将是有益的

  回复于 2024-04-29T01:42:29+08:00
• 5

  我在使用Karma / Jasmine测试我的Angular 6 App时遇到了这个错误 . 我已经在我的顶级模块中导入了 FormsModule . 但当我添加一个使用 [(ngModel)] 的新组件时，我的测试开始失败 . 在这种情况下，我需要在 TestBed TestingModule 中导入 FormsModule .

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule
      ],
      declarations: [
        RegisterComponent
      ]
    })
    .compileComponents();
  }));
  

  回复于 2024-04-29T01:42:29+08:00
• 362

  你的 ngModel 无法正常工作，因为它还不是你的 NgModule 的一部分 .

  您必须告诉 NgModule 您有权在整个应用程序中使用 ngModel ，您可以通过将 FormsModule 添加到 app.module.ts - > imports - > [] 来实现 .

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

  回复于 2024-04-29T01:42:29+08:00
• 1

  尝试添加

  模块级别的ngModel

  代码与上面的代码相同

  回复于 2024-04-29T01:42:29+08:00
• 3

  在 app.module.ts 中添加：

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

  回复于 2024-04-29T01:42:29+08:00
• 7

  //import form module in app.module.ts.
  
      import { FormsModule} from '@angular/forms';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      ContactsComponent
    ],
    imports: [
      BrowserModule,HttpModule,FormsModule     //Add here form  module
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
      //In html
      <input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">
  

  回复于 2024-04-29T01:42:29+08:00