angular - Angular 自定义验证器未将 FormArray 标记为无效
问题描述
下面的自定义百分比验证器将受益人数组作为参数。受益人表单是使用 planPercents 构建的,百分比为 formConrol。控制台日志适用于任何具有超过 100% 分布的计划。但是,我无法成功返回无效并将 formArray 标记为无效。
beneficiaries: this.fb.array([], PercentValidator.beneficiaryDistValidator),
getPlanPercentGroup(): FormGroup {
return this.fb.group({
planUnitId: [null, Validators.required],
percent: [0, Validators.required],
});
}
import {FormArray} from '@angular/forms';
export class PercentValidator {
static beneficiaryDistValidator(formArray: FormArray): ValidationResult {
if (formArray.controls.length) {
// if there is at least one beneficiary
const planPercentArray = formArray.at(0).get('planPercents') as FormArray;
if (planPercentArray && planPercentArray.controls.length) {
for (let i = 0; i < planPercentArray.controls.length; i++) {
let planPercentCounter = 0;
formArray.controls.forEach(beneficiary => {
const planPercentArray2 = beneficiary.get('planPercents') as FormArray;
planPercentCounter += planPercentArray2.at(i).get('percent').value;
if (planPercentCounter > 100) {
console.log('Invalid');
return {Invalid: true};
}
});
}
}
}
return null;
}
}
export interface ValidationResult {
[key: string]: boolean;
}
解决方案
那是因为您试图从forEach
回调内部返回。您必须在回调外部定义一个变量,并从内部分配它。然后你就可以return
了。
推荐阅读
- reactjs - 如何使用 react-i18next 触发强制更新?
- javascript - 在网站的 https 版本上,我的年龄验证上的 Javascript 输入按钮不起作用
- matlab - Matlab:如何将 Excel 文件保存到特定文件夹而不是当前文件夹?
- python - tkinter 在标签帧中断标签帧大小中添加小部件
- android - HTTP 请求在 Android 应用程序中返回“错误请求”(代码 400),但适用于邮递员(代码 200)
- mysql - 由于 HAVING 子句,如何告诉 MariaDB/MySQL 列是唯一的
- angular - 从 cdkDropList 拖放并作为一张卡片放在画布中
- linux - 如何在 Linux 中复制文件并保留部分路径?
- c# - 检索主要类别下的子类别列表并将其传递给视图
- command-line - 当该目录中有一些文件时,为什么在 Mac 上找不到 dir: command?