文章目的是使用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会更新那些被改变的数据值。
出于这个原因，ngModel不再是ReactiveFormsModule的一部分了。
这意味着可以在组件类中写更少的代码，不过模板驱动表单是异步工作的，这可能会在某些情况下复杂化开发。
同步vs异步
响应式表单是同步的。模板驱动表单是异步的，这是其区别的根源。
在响应式表单中，你在代码中创建一个完整的表单控件树。你可以从子表单或父表单中立即更新或取回一个值，因为所有的控件都可访问到。
模板驱动表单将他们的表单控件的创建委托给了指令。为了避免“检查后又更改”的错误，这些指令使用了不止一个循环来建立整个控件树。这意味着你必须在操作任何组件类中的空间表单时等那么一小会儿。
比如说，如果你使用@ViewChild(NgForm)查询注入到表单控件中并在ngAfterViewInit这个生命周期钩子中检查它，你将发现它没有子元素。你必须等一会，使用setTimeout来等待，然后你才能从这个空间中去除值并验证它或者将它设置为新的值。
模板驱动表单的异步性同时复杂化了单元测试。你必须使用async()或者fakeAsync()来包装你的测试块来避免找不到表单的值。而如果使用的是响应式表单，一切都如你所愿的存在着。
哪一个方式更好？
没有哪种是更好的。他们是两种不同的搭建方式，各自拥有长处和短处。使用最适合你的方式才是对的。在一个应用中你可能两种方式都要使用到。
本文仅仅会描述响应式的范例与精华所在。对于模板驱动式表单，可以前往表单介绍页。
接下来你将写出你自己的项目来演示响应式表单。然后你将学会关于angular表单类以及如何在响应式表单中使用它。