Question

我在一个表单组中大约有150个复选框复选框由15个部分（表单数组）组成

首先，它是隐藏的，当单击单选按钮时，将验证器附加到表单组并显示类别列表，当单击列表时，将显示相应的复选框

验证器功能使用一种服务来跟踪选中了哪些复选框。如果可以，则抛出错误

问题是当我单击单选按钮以删除验证器时，在删除之前，验证器函数被调用了数千次

这会使应用程序变慢，而且如果我单击“删除”并多次添加验证器按钮，它会变得更糟，需要更长的时间来显示列表。

在此之后，如果我单击一个复选框，则该应用可能会变得无响应，因为迭代该功能需要花费多长时间

设置和删除验证的功能：

 onSelected(): void {
    const myFormGroup: AbstractControl = this.form.controls.theFormGroup;
        if (this.form.get('myButton').value === 'Yes') {
            myFormGroup.validator = ModValidation.requireCheckboxesToBeChecked(this.stateService);
            } else {
        //Exucutes thousands of validation calls before it gets here
        myFormGroup.setErrors(null);
        myFormGroup.setValidators(null);
        myFormGroup.reset();
        }
    myFormGroup.updateValueAndValidity();

}

我尝试获取的价值

验证者：

static requireCheckboxesToBeChecked(stateService: StateService): ValidatorFn {
   return (formGroup: FormGroup): { [key: string]: boolean } | null => {
      const checkedCount = stateService.currentCheckedCount();
      if (checkedCount === 0) {
          return  {
            'isNotChecked' : true
          };
        }
      return null;
    };
  }

返回选中复选框的功能：

  currentCheckedCount(): number {
    let sumOfAllChecked = 0;
    Object.keys(this.store).forEach((category: string) => {
      this.store[category].forEach((item) => {
       if (item.checked)  {
         sumOfAllChecked += 1;
        }
      });
    });
    return sumOfAllChecked;
  }

验证多个复选框会使应用程序Angular 5变慢

0 个答案: