1. 说明
表单是Web程序中的重要组成部分，构建良好以及实用的表单必须解决如下几个问题：
(1). 如何跟踪及更新表单的数据状态
(2). 如何进行表单验证
(3). 如何显示表单验证信息
Angular2针对如何解决复杂的表单问题，提供了Template Driven和Model Driven两种模式。
2. Template Driven
Angular2 提供了NgModel指令来提供双向绑定，通过双向绑定来同步跟踪表单的数据变化，十分简单与易用。通过NgModel指令创建的表单必须结合DOM模板才能使用，所以称之为Template Driven方式。我们来看一个采用NgModel创建表单的示例：
|
import { Component, OnInit } from '@angular/core'; @Component({ moduleId: 'portal', selector: 'portal', template: `<form #f="ngForm" class="form" role="form"> <legend>Form title</legend> <div class="form-group"> <label for="">name:</label> <input type="text" class="form-control" name="name" id="name" [(ngModel)]="name" required> </div> <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button> </form>` }) export class PortalComponent implements OnInit { name: string; constructor() { } ngOnInit() { } } |
我们实现了一个简单的输入表单，使用ngFrom创建一个表单，包含一个名称为name的必录框和一个提交按钮。模型类中几乎木有什么内容。Template Driven中的校验是通过在模板中针对各个模块添加校验性指令实现的，例如给name输入框添加必录性校验required。
3. Model Driven
接下来我们来创建一个Model Driven的示例，如下
|
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, FormControlName, Validators } from '@angular/forms'; @Component({ moduleId: 'portal', selector: 'portal', template: `<form [formGroup]="f" class="form" role="form"> <legend>Form title</legend> <div class="form-group"> <label for="">name:</label> <input type="text" class="form-control" name="name" id="name" formControlName="name"> </div> <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button> </form>` }) export class PortalComponent implements OnInit { f: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.f = this.fb.group({ 'name': ['', [Validators.required]] }) } } |
虽然表面上看上去差不多，但是Model Driven和Template Driven还是存在部分区别。首先，不同于采用ngFrom指令来创建表单，Model Driven采用formGroup来创建表单，同事录入框的指令也不同于ngModel，而是使用formControlName。组件类也存在较大区别，Model Driven创建的表单实际的控制逻辑是在组件类中实现的，我们看到FormGroup是通过FormBuilder创建出来的来的，并且针对FormGroup的每个组件可以通过Validators类型进行编码来实现校验。例如，给name组件加上必录性校验required。
4. 表单验证
Angular2跟踪输入框的三种状态信息，并应用相应的css样式，分别如下：
(1). touched or untouched 是否访问过
(2). valid or invalid 是否有效
(3). pristine or dirty 是否变化过
同样的，Angular2跟踪整个表单的状态，可以使用来禁止及启用提交表单。
我们来了解一下表单验证是如何工作的。
Template Driven模式中，首先，Angular会自动的给form表单应用一个ngForm指令，该指令会在内部创建一个FromGroup。 其次，每个ngModel指令会在内部创建一个匿名的FormControl，并将注册到FromGroup中，而校验类指令例如required等则会和FormControl绑定。当改变输入时，则会触发FormControl中对应的OnChange事件触发校验等。
在Model Driven模式中，在对应的组件类中编码创建FromGroup，每个子类型为FromControl对象，在创建FromControl子类型中可以使用Validators绑定对应的校验方法，最后采用属性的方式和表单进行绑定。在模板中，利用formControlName指令将FromControl元素和对应的输入框链接起来，当改变输入时，则会触发FormControl中对应的OnChange事件触发校验等。
我们知道了校验是如何工作的以及校验的对应的状态信息，我们可以根据这些信息进行相应状态判断与显示。例如，通过控制表单的valid的状态来禁用提交按钮等。
5. 联合使用
Template-Driven方式在展现数据以及实现表单初始化上非常方便与直观，而Model-Driven方式在添加校验，监控数据改变以及自动化测试方便具有突出的有点。在某些情况下，我们可以联合使用这两种方式，例如
(1). 我们可以使用ngModel去读取数据，使用fromGroup添加校验信息并监控数据变化
(2). 我们可以添加一个引用来指向单个输入框的control信息，并利用该应用来实现单个组件状态信息的显示