<span style="font-family:Microsoft YaHei;"> </span>
Angular2 重新设计了全新的表单模块，本文基于 angular rc.4 版本
ng2的表单有三个重要概念
1 FormControl //它封装了表单的inputs项，对外暴露为一个可以操作的FormControl对象
2 Validator //包括了一些常用的表单验证方法和一些工具函数，使得我们可以添加自定义的验证逻辑
3 Observers //检测表单的变动并执行相应的操作
FormControl 和 FormGroup
FormControl 代表单一的 input 输入域，它是 angular2/forms 的最小单元，在 FormControl中我们可以访问 input的值，当前的状态，例如是否 valid，是否 dirty，是否有 errors
在组件中创建一个FormControl：
<span style="font-family:Microsoft YaHei;">let nameControl = new FormControl("kate");
let name = nameControl.value; //kate
nameControl.errors //StringMap(string,any) of errors
nameControl.dirty //false
nameControl.valid //true</span>
于是创建表单的过程就是创建一系列FormControl并添加相应的元数据和逻辑代码的过程。在模板中这样使用一个FormControl：
<input type="text" [formControl]="name"> //form 表单中某一行
这时我们就相当于在表单form的上下文环境中创建了一个新的FormControl对象。由于大部分表单都不止一个输入域，因此，我们需要有一种方式来管理多个 FormControl，同时还需要验证我们的表单，我们可以使用循环来遍历所有的FormControl来实现，但是这样会相当笨重而且复杂，没事，ng2为我们提供了 FormGroup来解决这个问题，下面我们创建一个FormGroup：
<span style="font-family:Microsoft YaHei;">let person = new FormGroup({
name: new FormControl("issliu"),job: new FormControl('web front end develpoer'),zip: new FormControl("200000")
})</span>
在实现上，FormGroup和FormControl都继承自AbstractControl抽象类，这意味着只要是在AbstraclControl中拥有的属性和函数在这两者之间都可以使用。因此，我们同样可以查看FormGroup的状态，值，变化检测等等。
下面我们来创建一个表单：
在创建表单之前，我们需要引入相应的依赖：
import {FormGroup,FormControl,FormBuilder,Validators,AbstractControl} from '@angular/forms'; import {FORM_DIRECTIVES} from '@angular/forms'; //FORM_DIRECTIVES 模块中包含了一系列常用的表单指令，只要我们在component的directives中引用了它，就可以在对应的template中使用这些指令 @Component({ selector: "test-form",directives: [FORM_DIRECTIVES],template: `<form #f="ngForm" (ngSubmit)="onSubmit(f.value)"><input name="sku" placeholder="sku"></input><button type="submit">submit</button></form>` }) export class DemoForm { onSubmit(form:any):void{ console.log('form data:',form); } }
这样，我们就实现了一个简单的表单。详细解释：这里可能会比较迷惑，因为我们并没有写什么指令在form上面，唯一的变化点在我们写了一个#f="ngForm"在form表单上面而已。
其实NgForm已经帮我们完成了这一切，在初始化Angular2表单时，只要我们引入了FORM_DIRECTIVES指令，它会自动检测form标签，如果form不包含
ngNoForm指令或者没有指定formGroup属性，则会自动为form表单应用NgForm指令，具体到细节就是绑定了一个名为ngForm的FormGroup到表单上。
这是一个非常有用的特性。当NgForm指令应用到form表单上后，它使得表单具有了以下两个功能：
1 一个名为 ngForm 的 FormGroup
2 表单具有一个 ngSubmit 的 @Output 属性
这里的#f="ngForm"表示我们使用了一个名为f的变量引用了这个表单对象，这样我们可以在模板的其他地方访问到它。
我们使用(ngSubmit)="onSubmit(f.value)"语句为表单绑定了一个提交行为，这个 onSubmit 方法是需要我们在对应的组件里面实现的。
这句话的意思是，当点击提交表单时，请调用组件的onSubmit方法。于是我们实现了一个具有一个input标签的可以提交的表单。
2 使用FormBuilder
ng2 为我们隐式构造FormControl 和 FormGroup 是非常简单快捷的。但是，如果我们希望自定义表单的行为怎么办？FormBuilder为我们很好的
解决了这个问题。
从命名上我们就可以看出，FormBuilder是用于帮助我们build表单的。前面我们提到表单是由FormControl和FormGroup组成的，这里我们可以把
FormBuilder理解为生产FormControl和FormGroup的工厂。
下面我们举例如何使用FormBuilder
我们需要引入REACTIVE_FORM_DIRECTIVE，这样才能在表单中使用formGroup和formControl指令。
import {FORM_DIRECTIVE,REACTIVE_FORM_DIRECTIVES,FormGroup} from '@angular/form'; @Component({ selector: "demo-form-builder",templateUrl:'demo.html',directives: [FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES] }) export class DemoFormBuilder{ myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = fb.group({ 'sku': ['ABC123'] }) } onSubmit(value){ console.log(value); } }
这里我们在构造函数中注入了一个FormBuilder实例，这个FormBuilder实例具有两个主要的方法:
1 fb.control() //构造一个FormControl实例
2 fb.group() //构造一个FormGroup实例
上面的例子中，我们构造了一个名为myForm的FormGroup实例，这个group包含一个名为sku的control，默认值为'ABC123'.
现在我们把这个组件引用到模板中：
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"> <input [formControl]="myForm.controls['sku']"/> <button type="submit">submit</button> </form>
这里，我们显示的指明了表单的formGroup属性，因此ng2不会为表单自动应用NgForm指令了。
NgForm自动应用的form表单需要符合以下规则：
form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]
这意味着使用了ngNoForm属性的表单也不会应用NgForm
总结：
如果我们需要隐式的创建FormGroup和FormControl，请使用 ngFrom和ngModel //FORM_DIRECTIVES
如果需要绑定到一个已经存在的FormGroup和FormControl对象，请使用formGroup和formControl //REACTIVE_FORM_DIRECTIVES
3 添加验证：
在上面的DemoFormBuilder 类构造函数中，我们为this.myForm初始化值，现在改为：
this.myForm = fb.group({ 'sku': ['',Validators.required] })
我们已经可以在模板中通过myForm.controls['sku']来访问表单的sku值了，但是这样会在模板中写很多代码，最方便快捷的，是在组件内定义
一个实例变量用来引用名为sku的FormControl，例如
sku:AbstractControl;
this.sku = this.myForm.controls['sku'];
于是在模板中我们可以直接使用sku变量。这样做的好处，是在模板的任何一个地方我们都可以快速访问sku变量，但是如果是一个非常大的表单，
我们则需要在组件中初始化很多这样的变量，使得代码体验比较糟糕。
FormControl和FormGroup都具有hasError方法，
如果我们需要验证一个FormControl，可以这么写
<div *ngIf="sku.hasError('required')"></div>
如果需要验证FormGroup的某一项，那就这么写
<div *ngIf="myForm.hasError('required','sku')"></div>
现在，让我们来自定义一个Validator吧！function skuValidator(control:FormControl): {[s:string]: boolean} { if(control.value.test(/^123/)) { return { invalidSku: true } } }
定义Validator有三个关键点：
它接受一个FormControl作为参数，同时返回一个StringMap<string,boolean>对象，如果这个boolean值为真表明验证通过，否则表明出错。
现在我们把这个验证项加入myForm：
this.myForm = fb.Group({ 'sku': ['',Validator.compose([ validators.required,skuValidator ])] })
ok，大功告成，现在我们在模板中可以使用：
<div *ngIf="myForm.hasError('skuValidator','sku')"></div>来检测是否通过Validator了
以上基本是angular表单中的主要功能，下面，我们还可以监听表单的变化：
同样，对于FormControl和FormGroup，都具有一个EventEmitter用来监听变动事件的。
我们通过调用control.valueChanges来获得他们的EventEmitter：
this.sku.valueChanges.subscribe( (value: string) => { console.log("sku value changed",value) } ) this.myForm.valueChanges.subscribe( (form: any) => { console.log("form chnged to:",form) } )
OK,以上就是几个比较关键的ng2表单知识点。祝大家学习愉快，工作顺利。