虽然答案解决了这个问题，但我想提供更多关于这个主题的信息，因为我在开始从事 Angular 项目时也遇到了这个问题。
初学者应该了解有两种主要类型的表单。它们是反应式表单和模板驱动的表单。从Angular 2 开始，建议对任何类型的表单使用反应式表单。
反应式表单更健壮：它们更具可扩展性、可重用性和可测试性。如果表单是您的应用程序的关键部分，或者您已经在使用响应式模式来构建您的应用程序，请使用响应式表单。
模板驱动的表单对于向应用程序添加简单的表单很有用，例如电子邮件列表注册表单。它们很容易添加到应用程序中，但它们的扩展性不如响应式表单。如果您有非常基本的表单要求和可以单独在模板中管理的逻辑，请使用模板驱动的表单。
更多详情请参考Angular documents。
说到问题，[(ngModel)]="..." 基本上是一种绑定语法。为了在您的组件 HTML 页面中使用它，您应该在您的 NgModule 中导入 FormsModule（您的组件所在的位置）。现在[(ngModel)] 用于简单的双向绑定，或者在您的表单中用于任何输入 HTML 元素。
另一方面，要使用响应式表单，请从 @angular/forms 包中导入 ReactiveFormsModule 并将其添加到 NgModule 的导入数组中。
例如，如果我的组件 HTML 内容在任何 HTML 元素中都没有 [(ngmodel)]，那么我不需要导入 FormsModule。
在下面的示例中，我已经完全使用了响应式表单，因此我不需要在我的 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>
创建GroupComponent 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。