Angular跨字段验证器中如何直接调用其它独立的验证器
在angular中关于表单动态验证的一种新思路一文中我们给出了Angular项目进行字段校验的三种方法。本文我们将重点围绕第一种方法展开讨论。
假设有如下应用:

该应用的功能是对输入的数值的奇偶数进行判断,如果满足条件,则启用Submit按钮,否则不启用。
跨字段验证
由于对输入数值的校验是根据输入类型来区分的,所以这里我们需要一个跨输入类型及输入数值的验证器:
ngOnInit(): void {
this.formGroup.setValidators((formGroup) => {
formGroup = formGroup as FormGroup;
const type = formGroup.get('type').value as number;
if (type === 0) {
// 验证是否是偶数 1️⃣
} else {
// 验证是否为奇数 1️⃣
}
});
}虽然我们可以在1️⃣处直接写入验证器的逻辑,但从分工的角度上来讲,这往往是最坏的一种的方案。
为此,我们同时准备了验证器:
/**
* 数字校验器
*/
export class NumberValidator {
/**
* 偶数校验器
*/
static isEven(control: AbstractControl): ValidationErrors | null {
const value = +control.value as number;
if (Number.isInteger(value) && value % 2 === 0) {
return null;
} else {
return { isEven: '输入的数字不是偶数' };
}
}
/**
* 奇数校验器
*/
static isOdd(control: AbstractControl): ValidationErrors | null {
const value = +control.value as number;
if (Number.isInteger(value) && value % 2 === 1) {
return null;
} else {
return { isOdd: '输入的数字不是奇数' };
}
}
}使用独立的验证器
有了独立的验证器后,我们可以使用类似如下的代码,直接在跨字段校验器中进行调用:
ngOnInit(): void {
this.formGroup.setValidators((formGroup) => {
formGroup = formGroup as FormGroup;
const type = formGroup.get('type').value as number;
if (type === 0) {
return NumberValidator.isEven(formGroup.get('value')); 🟢
} else {
return NumberValidator.isOdd(formGroup.get('value')); 🟢
}
});
}是的,在调用的时候将需要验证的FormControl传入即可。
如果我们的跨字段验证器需要同时对多个字段进行校验,则还可以这样:
const result = {
...Validators.required(formGroup.get(this.formKeys.image)),
...Validators.required(formGroup.get(this.formKeys.imageLeftTopPoint)),
...Validators.required(formGroup.get(this.formKeys.imageRightBottomPoint)),
...MapPointValidator.isPoint(formGroup.get(this.formKeys.imageLeftTopPoint)),
...MapPointValidator.isPoint(formGroup.get(this.formKeys.imageRightBottomPoint))
}
return Object.keys(result).length === 0 ? null : result; 🟩🟩 处对返回的错误信息进行判断,如果长度为0,则说明返回了{},直接返回null,否则返回多个验证器拼接后的错误信息。
如果你想看到具体的代码,请点击:示例代码
总结
到此这篇关于Angular跨字段验证器中如何直接调用其它独立的验证器的文章就介绍到这了,更多相关Angular调用其它独立验证器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Angular.JS内置服务$http对数据库的增删改使用教程
我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象,下面这篇文章主要给大家介绍了关于Angular.JS内置服务$http对数据库的增删改等操作的相关资料,需要的朋友可以参考下。2017-05-05
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友参考下吧2018-08-08


最新评论