Angular2 表单

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',

<legend>Form title</legend>

</div>

<button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button>

</form>`

})

export class PortalComponent implements OnInit {

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',

<legend>Form title</legend>

</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信息，并利用该应用来实现单个组件状态信息的显示

巴特西