Angular FormArray ValidatorFn doesn't compile Typescript

Question

I am getting the following Typescript errors with the below validator method. I feel, I have tried everything, and I am out of ideas. Can anyone tell me how to solve the problem?

The validator method doesn't let the project compile and the problem is thus unrelated to the use of the method.

Type '(formArray: FormArray) => { required: boolean; } | null' is not assignable to type 'ValidatorFn'.
      Types of parameters 'formArray' and 'control' are incompatible.
        Type 'AbstractControl' is missing the following properties from type 'FormArray': controls, at, push, insert, and 6 more.

public static minSelectedCheckboxes(min: number = 1): ValidatorFn {
    const validator: ValidatorFn = (formArray: FormArray) => {
   
      const totalSelected = formArray.controls
        // get a list of checkbox values (boolean)
        .map((control) => control.value)
        // total up the number of checked checkboxes
        .reduce((prev, next) => (next ? prev + next : prev), 0);

      // if the total is not greater than the minimum, return the error message
      return totalSelected >= min ? null : { required: true };
    };

    return validator;
  }

The method is taken from this example, which compiles, but it uses compilerOptions.strict = false, which is not acceptable. https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular

Example in Stackblitz is here: https://stackblitz.com/edit/angular-98wn2v (fork of above example with compilerOptions.strict = true)

Stackblitz is added to the question. It also fails in the example, if compilerOptions.strict are set to 'true'. — nicolaib
– nicolaib, Commented Aug 5, 2020 at 16:10
It's working as intended stackblitz.com/edit/angular-ivy-dokm2h — Chellappan வ
– Chellappan வ, Commented Aug 5, 2020 at 17:05
@Chellappanவ No, you haven't turned compilerOptions.strict to 'true' in that example. :-) It fails to compile, when it is changed. — nicolaib
– nicolaib, Commented Aug 5, 2020 at 21:22
Already enabled strict mode "angularCompilerOptions": { "enableIvy": true, "fullTemplateTypeCheck": true, "strictInjectionParameters": true } — Chellappan வ
– Chellappan வ, Commented Aug 6, 2020 at 3:44

Drag13 · Accepted Answer · 2020-08-05 16:40:18Z

4

ValidatorFn expects AbstractControl type as the first parameter, but you are passing FormArray which is the derived class.

This will work as expected:

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

    throw new Error('formArray is not an instance of FormArray');
  };

  return validator;
}

answered Aug 5, 2020 at 16:40

Drag13

6,0281 gold badge22 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular FormArray ValidatorFn doesn't compile Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related