ngModel来自FormsModule。在某些情况下，您可能会收到此类错误：

您没有将FormsModule导入到声明组件的模块导入数组中，即使用ngModel的组件。您已经将FormsModule导入一个模块，该模块继承了另一个模块。在这种情况下，您有两个选项：

让FormsModule从两个模块（module1和module2）导入导入数组。通常：导入模块不会提供对其导入模块的访问权限。（导入不继承）将FormsModule声明到module1中的导入和导出数组中，以便能够在model2中看到它

（在某些版本中，我遇到了这个问题）您正确导入了FormsModule，但问题出在输入HTML标记上。必须为输入添加name标记属性，[（ngModel）]中的对象绑定名称必须与name属性中的名称相同

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

我完成了迁移（引入了一个新的app.module.ts文件，将package.json更改为包含新版本和缺失的模块，最后根据Angular2快速启动示例将main.ts更改为相应的引导）。

我做了一次npm更新，然后做了一个npm过时，以确认安装的版本是正确的，但仍然没有运气。

我最终彻底删除了node_modules文件夹，并重新安装了npm install-瞧！问题已解决。

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

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

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

在Angular 4中，语法需要

[(ngModel)]

虽然答案解决了这个问题，但我想提供更多关于这个主题的信息，因为我在开始从事Angular项目时也遇到过这个问题。

初学者应该理解有两种主要形式。它们是反应形式和模板驱动形式。从Angular 2开始，建议对任何类型的表单使用Reactive表单。

反应式表单更健壮：它们更具可扩展性、可重用性和可测试性。如果表单是应用程序的关键部分，或者您已经在使用反应式模式构建应用程序，请使用反应式表单。

模板驱动的表单对于向应用程序添加简单表单（如电子邮件列表注册表单）非常有用。它们很容易添加到应用程序中，但扩展性不如反应式表单。如果您有非常基本的表单需求和逻辑，可以在模板中单独管理，请使用模板驱动的表单。

有关详细信息，请参阅Angular文档。

说到问题，[（ngModel）]=“…”基本上是一种绑定语法。为了在组件HTML页面中使用它，您应该在NgModule（组件所在的位置）中导入FormsModule。现在[（ngModel）]用于简单的双向绑定，或者在表单中用于任何输入HTML元素。

另一方面，要使用反应式表单，请从@angular/forms包中导入ReactiveFormsModule，并将其添加到NgModule的imports数组中。

例如，如果我的组件HTML内容在任何HTML元素中都没有[（ngmodel）]，那么我就不需要导入FormsModule。

在下面的示例中，我完全使用了Reactive Forms，因此我不需要在NgModule中使用FormsModule。

创建组模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GroupsRoutingModule, routedAccountComponents } from './groups-routing.module';
import { ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
    declarations: [
        routedAccountComponents
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        GroupsRoutingModule,
        SharedModule,
        ModalModule.forRoot()
    ]
})
export class GroupsModule {
}

创建路由模块（为了可读性和代码主体分开）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GroupsComponent } from './all/index.component';
import { CreateGroupComponent } from './create/index.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'groups',
    pathMatch: 'full'
  },
  {
    path: 'groups',
    component: GroupsComponent
  }
];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GroupsRoutingModule { }


export const routedAccountComponents = [
  GroupsComponent,
  CreateGroupComponent
];

CreateGroupComponent html代码

<form [formGroup]="form" (ngSubmit)="onSubmit()">
        <label for="name">Group Name</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" formControlName="name" class="form-control">
            </div>
        </div>
    </form>

CreateGroupComponent ts文件

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DialogResult } from 'src/app/shared/modal';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { validateAllFormFields } from 'src/app/services/validateAllFormFields';
import { HttpErrorResponse } from '@angular/common/http';
import { modelStateFormMapper } from 'src/app/services/shared/modelStateFormMapper';
import { GroupsService } from '../groups.service';
import { CreateGroup } from '../model/create-group.model';

@Component({
    selector: 'app-create-group',
    templateUrl: './index.component.html',
    providers: [LoadingService]
})

export class CreateGroupComponent implements OnInit {
    public form: FormGroup;
    public errors: string[] = [];
    private destroy: Subject<void> = new Subject<void>();

    constructor(
        private groupService: GroupsService,
        private toastr: ToastrService
    ) { }

    private buildForm(): FormGroup {
        return new FormGroup({
            name: new FormControl('', [Validators.maxLength(254)])
        });
    }

    private getModel(): CreateGroup {
        const formValue = this.form.value;
        return <CreateGroup>{
            name: formValue.name
        };
    }

    public control(name: string): AbstractControl {
        return this.form.get(name);
    }

    public ngOnInit() {
        this.form = this.buildForm();
    }


    public onSubmit(): void {

         if (this.form.valid) {
             // this.onSubmit();
             //do what you need to do
         }
    }
}

我希望这有助于开发人员理解为什么以及何时需要使用FormsModule。