我们在开发的时候都会用到表单,那么验证器就是必不可少的东西,这篇文章主要给大家介绍了关于在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'));以上就是Angular跨字段验证器中如何直接调用其它独立的验证器的详细内容，更多请关注0133技术站其它相关文章！
未经允许不得转载：0133技术站首页 » Angular.js 答疑
