angular - 如何自定义验证 FormArray
问题描述
我正在使用 FormArray 构建一个反应式表单,其中包含 FormGroups 。每个 FormGroup 有 3 个控件,其中两个是下拉菜单。我想防止用户在其中一个下拉菜单中多次选择相同的选项。我编写了一个自定义验证器来实现这一点。验证器似乎有效,因为我在 if 子句中输入了 return { 'subCategoryRepetition': true }
,但表单保持有效,控件的错误数组为空。
提前感谢您的帮助!
这是代码:
组件.ts
initEditUserDetialsForm() {
this.editUserDetailsForm = this.formBuilder.group({
...
categories: this.formBuilder.array(this.initSavedCategoryArray(this.merchantUserDetails.categories),
checkSubCategoryRepetition.bind(checkSubCategoryRepetition))
});
this.categories = this.editUserDetailsForm.get('categories') as FormArray;
this.removeCategoryDisabled = this.categories.length < 2;
}
initSavedCategoryArray(categories: CategoryDTO[]): FormGroup[] {
let formGroupArray: FormGroup[] = [];
categories.forEach((category, index) => {
if (this.subCategories.length === 0) {
this.subCategories.push(category.subCategory.mainCategory.subCategories);
} else {
this.subCategories.splice(index, 1, category.subCategory.mainCategory.subCategories);
}
formGroupArray.push(
this.formBuilder.group({
mainCategory: [+category.subCategory.mainCategory.mainCategoryId, Validators.required],
subCategory: [+category.subCategory.subCategoryId, Validators.required],
donationPercentage: [category.donationPercentage, [Validators.required, Validators.min(1), Validators.max(100)]]
})
);
});
return formGroupArray;
}
custom.validator.ts
export function checkSubCategoryRepetition(formArray: FormArray) {
let subCategoryIds: number[] = [];
formArray.controls.forEach((formGroup: FormGroup) => {
if (subCategoryIds.includes(+formGroup.controls.subCategory.value)) {
console.log('repetition')
return { 'subCategoryRepetition': true };
}
subCategoryIds.push(+formGroup.controls.subCategory.value);
});
return null;
}
解决方案
forEach 内部 return 不会破坏函数执行,这就是为什么你它不起作用,尝试使用 for 或 reduce 而不是 forEach。
试试这个:
export function checkSubCategoryRepetition(formArray: FormArray) {
let subCategoryIds: number[] = [];
const groups = formArray.controls;
for(let i = 0; i < groups.length; i++){
if (subCategoryIds.includes(+group[i].controls.subCategory.value)) {
console.log('repetition')
return { 'subCategoryRepetition': true };
}
subCategoryIds.push(+group[i].controls.subCategory.value);
}
return null;
}
推荐阅读
- java - 实例化数组列表中的对象
- tfs - 可以以编程方式创建 Team Foundation Server 项目吗?
- c++ - 从文件中读取,并在函数 C++ 中写入数组
- java - CDI @Produces 在字段上注释的目的是什么?
- visual-studio-code - 如何使用 vscode:// url 在wsl下的vscode中打开文件?
- python - Django Rest Framework PUT 视图显示已验证数据未填充
- spring - 我如何将 spring 本地化 messages.properties 捆绑到另一个 repo,然后通过 maven 依赖项使用?
- c# - HTTP 错误 500.19 - 内部服务器错误 - 无法访问请求的页面,因为该页面的相关配置数据无效
- networking - Hyper-V 服务器 2019 – Internet 不适用于来宾 VM
- ubuntu - objcopy 在 makefile 上失败,但在终端中手动输入没有问题