Angular学习笔记07——表单-白红宇

##模板式表单需要引入FormsModule，引入该模块后，在该模块下的所有表单都默认被装饰为模板模式。若仍要使用HTML模式，则指定<form ngNoForm>。

| ------------- |:-------------:| -----------------------|

| NgForm | FormGroup | 定义在表单<form>标签上，指向整个表单 |

| NgModel | FormControl | 定义在表单行上，指向单行表单数据 |

| NgModelGroup | FormGroup | 定义div包含一组关联的表单行，统一处理 |

代码示例：

//NgForm 定义整个表单   同时指定表单提交事件，angular的表单不会再触发默认的表单提交
    	
     
      用户名:
      
     
//通过ngModel和name属性来绑定表单的元素	
     
      手机号:
      
     
	
     
      //通过ngModelGroup来绑定多个表单元素，被绑定的表单元素会作为group的属性		
      
       密码:
       
      
		
      
       确认密码:
       
      
	
     
	
     
    
复制代码

##响应式表单 -FormControl-定义到表单行输入数据

username: FormControl = new FormControl("xxx")

如代码所示，前面模板式表单中的ngModel定义的username实质就是定义了如上一行代码

-FormGroup-定义了整个表单或多个FormControl集合

formModel: FromGroup = new FormGroup({	from: new FormControl(),	to: new FormControl()});复制代码

-FormArray-定义了一个可变长的集合,与FormGroup不同的是，不能通过属性名来访问，而是通过下标来获取，从0开始。

email: FormArray = new FormArray([	new FromControl("aaaaa");	new FromControl("bbbbb");]);复制代码

代码示例:

fromModel: FromGroup = new FormGroup({	username: new FromControl("aaa"),	dateRange: new FormGroup({		from: new FormControl(),		to: new FormControl()	}),	emails: new FormArray([		new FromControl("aaaaa");		new FromControl("bbbbb");	])});addEmail(){	let emails = this.formModel.get("emails") as FormArray;	eamils.push(new FromControl);}复制代码

###FormBuilder的使用 constructor(fb: FormBuilder){ this.formModel = fb.group({ username: ['',校验方法], mobile: [''], passwordsGroup: fb.group({ password: [''], pconfirm: [''] }) },{'校验方法'}); } 使用FormBuilder可以简洁构造表单模型的代码。

##表单校验 校验器

1、使用预定义的校验器

constructor(fb: FormBuilder){	this.formModel = fb.group({		username: ['',[Validators.required,Validators.minLength(6)]],//必填，最小长度是6		mobile: [''],		passwordsGroup: fb.group({			password: [''],			pconfirm: ['']		})	});}onSubmit(){	let isValid: boolean = this.formModel.get("username").valid;//校验结果	let errors: ant = this.formModel.get("username").errors;//校验错误信息}复制代码

2、自定义校验器 xxxxx(control: AbstractContol):{[key: string]: ant}{return null}

//formcontrol的校验mobileValidator(control: FormControl): any{	var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;	let valid = myreg.test(control.value);	return valid ? null : {mobile : true};	//校验失败的时候返回空，成功返回对象和值}//formgroup的校验equalValidator(group: FormGroup): any{	let password:FromControl = group.get("password") as FormControl;	let pconfirm:FromControl = group.get("pconfirm") as FormControl;	let valid: boolean = (password.value === pconfirm.value);		return valid ? null : {equ: {info:"密码和确认密码不一致"}}}//使用校验器constructor(fb: FormBuilder){	this.formModel = fb.group({		username: ['',[Validators.required,Validators.minLength(6)]],//必填，最小长度是6		mobile: [''，this.mobileValidator],		passwordsGroup: fb.group({			password: [''],			pconfirm: ['']		},{validator: this.equalValidators})	});}复制代码

通用的校验器可以放到一个单独的ts文件中，作为公用的校验方法。

声明全局方法的时候使用 export function xxx(){}

对整个表单的校验结果是this.formModel.valid,只有所有的校验都成功的时候才会返回true;

表单错误信息显示：


    
     用户名:
     
    
    
     用户名是必填项
    
    
     用户名最小长度是6
    
    
     手机号:
     
    
    
     请输入正确的手机号
    
    	
     
      密码:
      
     
	
     
      	密码最小长度是6
     
//在对formgroup中的formcontrol校验的时候要注意	
     
      确认密码:
      
     
	
     
      	{
   {formModel.geterror('equ','passwordsGroup')?.info}}
     
    
复制代码

异步校验器

username: ['',校验方法,异步校验方法]

在bulider里面添加第三个函数，可以为需要校验的项新增一个异步的校验器，而校验的结果可以通过xxx(表单的formGroup).status来确认。

status有三个值 invalid pending valid invalid状态表示未被校验通过

pending状态即表示当前异步校验器仍在校验过程中

valid状态表示校验通过

###状态字段 touched和untouched

当前formcontrol是否被点击过，若表单未被用户使用访问的时候，即不显示错误信息


    
     用户名:
     
    
    	
     
      	用户名是必填项
     
	
     
      	用户名最小长度是6
     
    
复制代码

pristine和dirty

若字段的值未被用户修改过，则pristine为true,dirty为false。否则为反。


    
     手机号:
     
    
    	
     
      	请输入正确的手机号
     
    
复制代码

pending

当一个字段处于异步校验的时候，pending值为true


    
     手机号:
     
    
    	
     
      	请输入正确的手机号
     
    
    
     	正在校验手机合法性
    
复制代码

###状态样式自定义可以对ng-valid ng-untouched ng-pending等验证状态进行修改

或者自己对属性进行绑定：

<input [class.hasError]="formModel.get('username').invalid && formModel.get('username').touched" type="text" formControlName="username">

当表单未验证通过且被用户触碰过，添加上一个hasError的自定义样式

##自定义指令 ng g directive xxxx新建一个指令文件

@Directive({	selector:'[xxxxx]',//在模板文件中使用时候直接使用xxxxx在标签属性中	providers:[{provide:NG_VALIDATORS,useValue:xxxxFucntion,multi: true}]//provide的token是固定的，useValue指向方法,multi表示一个token下是否可以挂多个值})复制代码