logForm(theForm: NgForm) { if (theForm.invalid) { if (theForm.controls['name'].errors) { this.nameErrorMsg = 'name error:' + JSON.stringify(theForm.controls['name'].errors); } else { this.nameErrorMsg = null; } } console.log(theForm.value); }
在这个方法里，theForm就是ngForm的模板引用实例，类型是NgForm的。
如果表单验证有失败，theForm.invalid就是false。
theForm.controls就是这个表单里的所有控件，如果想获取姓名的验证结果，就是theForm.controls['name'].errors。
用这种方式，我们就可以在组件中获取所有表单控件的数据、验证状态、错误信息等。
重置表单
一般情况下，如果是新建用户信息，我们需要在保存成功以后，清空当前数据，重置表单的状态，等待用户重新输入。如果我们只是清空数据，这时候那些验证错误就会被检测到，我们我们需要将表单控件也都重置成未修改状态。这在Angular2里很简单，它提供了一个reset方法。
我们在里面添加一个重置按钮：
<button (click)="reset(userForm)">重置</button>
然后在组件里：
reset(theForm: NgForm) { theForm.reset(); return false; }
注意我们需要让这个方法返回false，这样他就不会触发submit的方法。
在官方的文档中，还提供了另一种技巧来实现这种重置，就是在form上使用ngIf：
<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate *ngIf="active">
只有在active为true时这个表单才会创建。
然后在重置的时候，设置这个active为false，这样这个表单就会被销毁，然后用setTimeout的方式再设置它为true，这个表单就会重新创建，这样就实现了重置的效果。
reset() { this.user = { // 重置用户数据 address: {} }; this.active = false; setTimeout(() => this.active = true, 0); return false; }
这也是一种小窍门，可以在某些情况下使用。
总结
至此，有关模板驱动的表单的基本用法大致完成，再总结一下模板驱动的表单的基本特性：
所有的表单控件的定义都在模板里
所有的验证器都在模板里面添加
表单数据的状态、验证结果都在模板上通过判断表单里面控件数据的状态来显示
如果需要测试这部分的代码，需要使用e2e（端到端）测试，也就是在浏览器里面