Angular2 自定义validators的实现方法

2024-02-17 10:34:03 156

angular当需要form表单需要验证时，angular自带了许多校验器，但是很多时候自带的无法满足业务需求，这时候就需要自定义的校验器

定义一个validator

定义validator需要实现ValidatorFn接口

源码：

exportinterfaceValidatorFn{
(c:AbstractControl):ValidationErrors|null;
}

接收一个AbstractControl返回ValidationErrors或者null

ValidationErrors源码

exportdeclaretypeValidationErrors={
[key:string]:any;
};

这其实就是返回一个keyvalue类型的对象，这个对象会在验证信息不通过的时候赋值给formControl.errors

写好的Validator需要在创建FormControl作为参数传入

FormControl的构造器源码

exportdeclareclassFormControlextendsAbstractControl{
constructor(formState?:any,validator?:ValidatorFn|ValidatorFn[]|null,asyncValidator?:AsyncValidatorFn|AsyncValidatorFn[]|null);

下面是个简单的例子（校验邮箱地址）：

定义一个返回ValidatorFn接口的方法

staticEMAIL_REG=newRegExp('\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}');
staticemail():ValidatorFn{
return(control:AbstractControl):{[key:string]:any}=>{①
if(!EMAIL_REG.test(control.value)){②
return{③
errMsg:'请输入正确的邮箱地址'
};
}
return{};④
};
}

①方法返回ValidatorFn的实例

②判断是否符合邮箱正则表达式

③如果不符合返回一个ValidationErrors对象，errMsg作为错误信息输出（这里也可以再加一个布尔型的作为判断）

④如果校验成功返回一个空的对象

传入校验器

email=newFormControl('',email())

模板：

{{email.errors.errMsg}}

当邮箱格式不正确时这里就会显示‘请输入正确的邮箱地址'

至此一个简单的校验器就完成了。

如果想比较2个form的值是否相等的话只需要做一些小的改变

staticEMAIL_REG=newRegExp('\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}');
staticemail(emailForm:FormControl):ValidatorFn{①
return(control:AbstractControl):{[key:string]:any}=>{
if(emailForm.value!==control.value){
return{
errMsg:'请输入相同邮箱地址'
};
}
return{};
};
}

①只需要在这里传入另一个需要做对比的formControl即可

email=newFormControl('',email())
email2=newFormControl('',email(email))

以上所述是小编给大家介绍的Angular2自定义validators的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

Angular2 自定义validators的实现方法

热门推荐

随机推荐