详解Angular2响应式表单

本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面。

文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件。

响应式表单是一项响应式风格的ng2技术，本文将解释响应式表单并用来创建一个英雄详情编辑器。

包含内容：

响应式表单介绍 开始搭建 创建数据模型 创建响应式的表单组件 创建组建的模板文件 引入ReactiveFormsModule 显示HeroDetailComponent 添加一个FormGroup 看看表单模型 介绍FormBuilder 验证的需求 放置FormGroup 检查FormControl属性 使用setValue以及patchValue设置表单模型数据 使用FotmArray提供FormGroup的数组 观察控件的更改

 响应式表单介绍

angular提供了两种表单搭建技术: 响应式表单和模板驱动式表单。都依赖于@angular/forms库，并共享了一些通用的表单控件集。
但是他们在原理、代码风格以及技术上存在区别。他们甚至有自己的模块：ReactiveFormsModule以及FormsModule。

响应式表单（ReactiveFormsModule）：

anguar的响应式表单简化了管理数据时响应式风格的编码实现，使用了在无视图数据模型(从服务器获取)以及以视图为导向的模型用于保持屏幕上HTML控件显示的值与状态。响应式表单提供了响应式模式测试以及验证上的便利。

使用响应式表单，你将在组件类中创建一个anular的表单控件树对象，并在组件模板中使用提供的技术绑定到原生表单控件标签中。

你直接在组件类中创建并操作控件对象。因为组件类能直接访问到数据模型以及表单控件结构，你可以将数据模型值推送到表单控件以及将用户的更改响应到后边来。组件可以观察表单控件状态的更改并响应这些更改。

直接使用表单控件对象工作的一个好处是值以及验证的更新总能够同步完成并受你控制。你不会遇到有时候因为模板驱动表单造成的时间问题，并且响应式表单更易测试。

为了保持响应的一致性，组件会保存不一致的数据模型，将其视为纯粹的原始值。不会直接更新数据模型，组件会提取用户的更改并转发到外面的组件或服务中，(可能是用来保存他们的)并返回一个新数据模型到组件，用于响应模型状态的更新。

使用响应式表单指令不需要你依赖于全部响应式原理，但是这确实能促进响应式编程方法如果你选择了要使用这个方法的话。

模板驱动式表单（FormsModule）：

模板驱动式的表单使用了完全不同的方式。

你在组件模板中放置HTML表单控件(input这些)并使用比如ngModel这些指令绑定到数据模型属性。

你不需要创建angular表单控件对象，因为angular会根据你的数据绑定信息自动帮你创建出来。你不是推送或者拉取数据值。angular在ngModel中帮你处理了。angular会更新那些被改变的数据值。