Bootstrap

【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模板的代码,把验证逻辑抽离到组件类中,方便跟踪表单控件值得变化;易于单元测试。

;