动态生成的复选框的自定义验证器不起作用

Question

我已经在Angular 13版本中创建了一个项目，以验证动态生成的复选框。我已经关注了这个博客（ https://coryrylan.com/博客/create-a-dynamic-checkbox-list-in-Angular ）。在此博客中，有一个自定义验证。但是验证对我不起作用。自定义验证器代码是：

function minSelectedCheckboxes(min = 1) {
    const myValidator: ValidatorFn = (formArray: FormArray) => {
        const totalSelected = formArray.controls
            .map(control => control.value)
            .reduce((prev, next) => next ? prev + next : prev, 0);
        return totalSelected >= min ? null : { required: true };
    };

    return myValidator;
}

但是我遇到以下错误。谁能帮助我解决错误？

src/app/app.component.ts：62：8-错误ts2322：type'（formarray：formarray： formarray）=＆gt; {必需：布尔值； } | null'不能分配输入 “验证器”。参数类型“ formarray”和“控制”是 不相容。 类型“ AbstractControl”缺少“ formarray”类型的以下属性：控制，at，pusp，插入和6个。

62 const myValidator：validatorFn =（formArray：formArray）=＆gt; { ~~~~~~~~~~~

​net/d1qe4.png“ alt =”在此处输入图像描述>

Answer 1

验证器具有以下类型：

export declare interface ValidatorFn {
    (control: AbstractControl): ValidationErrors | null;
}

因此您需要更改这样的功能：

function minSelectedCheckboxes(min = 1) {
  const myValidator: ValidatorFn = (control: AbstractControl) => {
    const formArray = control as FormArray;
    const totalSelected = formArray.controls
      .map((control) => control.value)
      .reduce((prev, next) => (next ? prev + next : prev), 0);
    return totalSelected >= min ? null : { required: true };
  };

  return myValidator;
}