首页 > 解决方案 > 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;
            }

标签: angular

解决方案


那是因为您试图从forEach回调内部返回。您必须在回调外部定义一个变量,并从内部分配它。然后你就可以return了。


推荐阅读