在网页开发中，表单估计是最常用的一个，同时也是最麻烦、最容易出问题的。在一个稍微复杂一点的应用中，我们除了用表单元素收集数据，还需要验证，几个数据之间可能还会相互关联，然后根据不同的数据值调用不同的业务逻辑等。
使用Angular提供的数据绑定的功能，我们可以很容易就在组件中获得用户输入的数据，Angular也提供了几种验证方式方便我们进行数据的校验。但是，一些自定义的数据验证、数据交互和业务逻辑还是需要自己处理。
在Angular2中，提供了2种表单实现方式，分别是'template-driven'（模板驱动的表单）和'model-driven'（模型驱动表单）。在这篇文章中，我们先来看看模板驱动的表单。顾名思义，模板驱动的表单就是大部分表单相关代码都在模板里，通过在模板里面添加ngForm, ngModel和ngModelGroup等属性来定义模板和验证信息，以及它跟组件之间的数据交互。
实例
下图是这篇文章使用的实例的界面：
它是一个用户信息输入的表单，包括4个字段，用户名、电话、城市和街道，演示了如何使用表单，给各个字段添加验证并显示验证结果，以及如何在组件中判断是否出错并获取出错信息。
项目源码可以从github获取，这个项目包含了几个Angular2表单相关的实例，可以使用下面的命令获取本文所对应的代码：
git clone https://github.com/Mavlarn/angular2-forms-tutorial
然后进入项目目录，运行下面的命令安装依赖然后运行测试服务器：
cd angular2-forms-tutorial git checkout template-driven # 检出该文所使用的tag npm install npm start
该项目是基于之前的Angular2-basic模板，这个教程相关的代码都在'template-forms'目录里面。
引入FormsModule
首先，我们需要在app.module.ts里引入FormsModule。
import { FormsModule } from '@angular/forms'; //省略其他 @NgModule({ imports: [ BrowserModule, FormsModule ], //省略其他 })
初始表单
然后，我们从一个基本的html表单开始：
<form> <label>姓名:</label> <input type="text"> <label>电话:</label> <input type="text"> <label>城市:</label> <input type="text"> <label>街道:</label> <input type="text"> <button type="submit">保存</button> </form>
在实际的实例中，使用了bootstrap的表单样式，一组输入框应该是下面这个样子，但是在本文中，为了节省页面显示的篇幅，我省略了div, form-group等，我们只需要关心如何在Angular2中使用模板驱动的表单。如果想查看完整的带样式的代码，请查看源文件。
<div> <label>姓名:</label> <div> <input type="text"> </div> </div>
ngForm
在上面的表单里，我们没有使用Angular2的任何功能，如数据绑定，也没有使用其他指令。但是，Angular2在<form>上实现了一个指令'ngForm'，这样，对于所有的html的form表单，都会使用ngForm组件去初始化该表单。
使用ngForm对象
接下来，我们需要在模板里面访问这个ngForm的实例，这样我们就能够从这个实例里面获取数据，或者获取数据验证状态。
在Angular2里，都提供了一个模板引用变量的功能，通过#加变量实现。通过这个功能，我们可以在同一元素、兄弟元素或任何子元素中引用模板引用变量。这样听着还是不好理解，我们看一个例子：
<input #phone placeholder="phone number"> <button (click)="callPhone(phone.value)">Call</button>
在这个例子中，我们通过#phone定义了一个变量，它所指的就是这个input元素，phone.value也就是这个输入框输入的值。
除了使用#，也可以使用ref-，例如ref-phone形式的定义跟#phone是一样的。
我们可以对任何的DOM元素使用这种方式获取当前引用，也可以对任何的Angular2的指令使用。在这个表单的例子中，我们这样来获取这个ngFrom的引用：
<form #userForm="ngForm">
其中'ngForm'就是当前这个指令，这样在这个模板里面，我们可以用userForm获得表单的所有数据。
提交表单
在html中，我们要提交一个form，会在form里写一个action的属性，然后，用一个类型为'submit'的按钮来提交。但是，在Angular2中，我们需要使用ngSubmit事件：
<form #userForm="ngForm" (ngSubmit)="logForm(userForm)"> <button type="submit">保存</button> </form>
这样，当用户点击保存按钮的时候，Angular2会使用自己的验证机制，验证所有的数据，然后在调用'logForm(userForm)'方法。
在我们的组件中，实现这个方法：
logForm(theForm: NgForm) { console.log(theForm.value); if (theForm.invalid) { // handle error. } }