Angular2学习_2(表单)

参考《angular权威指南》

表单

表单的基本单位FormControl和FormGroup是最基础的表单对象。

组成结构：FormControl => FormGroup

 

FormControl：代表单一输入字段，是angular表单中的最小单位，封装了这些字段的值和状态（比如是否有效，是否脏（被修改），是否有错误）

用法：

let nameControl = new FormControl(“Nate”);

let name = nameControl.value;//Nate

nameControl.errors ;//StringMap<string,any>of errors;

nameControl.dirty ;//false;

nameControl.valid; //true;

通常将这个类按属性的方式附加在dom元素

<imput type=”text” [formControl]=”name” />

 

FormGroup：大多表单不止一个字段，字段多了就不利于管理和验证，而FormControl就是用来管理一组FormControl的；

创建方法：

let personInfo = new FormGroup({

firstName: new FormControl(“firstname”),

secondName: new FormControl(“secondname”),

lastName: new FormControl(“lastname”)

})

FormControl和FormGroup都是继承自同一个祖先AbstractControl，就意味着检查一个FormGroup的值和状态和检查一个FormControl的值和状态是一样的

personInfo.value;//{firstName:”firstname”,secondName:”secondname”,lastName:”lastname”};

personInfo.errors ;//StringMap<string,any>of errors;

personInfo.dirty ;//false;

personInfo.valid; //true;

 

 

 

Angular 有两种使用表单的方式：FormsModule和ReactiveFormsModule；

FormsModule提供了一些模板驱动的指令：ngModel和NgForm等；

ReactiveFormsModule页提供了一些指令：formControl和ngFormGroup等；

 

当我们引入FormsModule时，NgForm会自动添加到视图中所有的<input>标签上（不会添加到带有formGroup属性的form标签上）；

NgForm提供了两个重要的功能：

1.一个名叫”ngForm”的FormGroup对象；

2.一个输出事件(ngSubmit)。

例：

<form #f=”ngForm” (onSubmit)=”onSubmit(f.value)”></form>//（#v=thing，表示希望在当前视图创建一个局部变量）

 

 

使用FormBuilder

使用ngForm和ngControl隐式构建FormControl和FormGroup不够灵活，使用FormBuilder则是更灵活和通用的方式；

FormBuilder中两个主要函数：

1.control用于创建FormControl对象；

2.group用于创建FormGroup对象。

 

 

表单验证：

特定验证：formControl（实例）.hasError(“required”)//检查特定的验证失败

1.可以将需要验证的FormControl赋给一个变量，例：

constructor(fb:FormBulider){

this.myForm = fb({

‘sku’:[‘’,Validotars.required]

});

This.sku = this.myForm.controls[‘sku’];

}

<form [formGroup]=”myForm”>

<input [formControl]=”sku” />

</form>

通过：<div *ngIf=”!sku.valid” class=”ui error message”>SKU is invalid</div>

这种方法在模板上使用判断验证的时候很方便，但是表单中需要验证的地方变多了就需要创建很多变量来赋值。

 

自定义验证器

验证器要求：1.输入一个FormControl作为参数2.当验证失败的时候，返回一个stringMap<string,boolean>对象，他的键为“错误代码”，值为true。

例：

skuValidator(control:FormControl){[s:string]:boolean}{

If(!control.value.match(/^123/)){

return {invalida:true}

}

}

 

添加多个验证器，使用Validators.compose来连接：

constructor(fb:FormBulider){

this.nyForm =fb({

‘sku’:[‘’,Validators.compose([

Validators.required,skuValidator

])]

})

}

 

监听变化

我们可以不必只在表单提交的时候进行验证，FormControl和FormGroup都带有EventEmitter（事件发射器），可以通过他来监听变化；

要监听控件的变化，我们要：

1.通过调用control.valueChanges访问到这个EventEmitter；

2.然后使用.subscribe方法添加一个监听器。

例：

constructor(fb:FormBulider){

this.myForm = fb({

‘sku’:[‘’,Validators.required]

});

this.sku = myForm.controls[‘sku’];

this.sku.valueChanges.subscribe(

(value:string => {

console.log(“The sku.value has changed to:” + value)

})

)

}