【Angular】模板驱动式表单和响应式表单

Angular 中有两种表单：

1、Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )

2、Reactive Forms - 响应式表单

若使用响应式表单，则导入 ReactiveFormsModule。
若使用模板驱动式表单，则导入 FormsModule 。

app.module.ts

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

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule
  ],
  declarations: [...],
  bootstrap: [...]
})
export class AppModule {}

app.module.ts

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

两种表单的对比 ：

1、模板式表单使用方便，适用于简单的场景；通过[(ngModel)]实现数据的双向数据绑定；不易于单元测试
2、响应式表单较为灵活，适用于复杂的场景，简化了HTML模板的代码，把验证逻辑抽离到组件类中，方便跟踪表单控件值得变化；易于单元测试。