Angular 11 - Type '(controlArray: FormArray) => ValidationErrors | null' is not assignable to type 'ValidatorFn'

Question

I try to implement a validator in Angular 11 but i get the compliation error: Type '(controlArray: FormArray) => ValidationErrors | null' is not assignable to type 'ValidatorFn'. Any ideas how to fix this error?

Validator-class:

import { FormArray, ValidationErrors } from "@angular/forms";

export class BookValidators {
    static atLeastOneAuthor(controlArray: FormArray): ValidationErrors | null {
        if(controlArray.controls.some(el => el.value)){
            return null;
        }else{
            return{
                atLeastOneAuthor: {
                    valid: false
                }
            }
        }
    }
}

The calling class

constructor(private fb: FormBuilder){}

private buildAuthorsArray(values: string[]): FormArray{
    // BookValidators.atLeastOneAuthor is now underlined with the error.
    return this.fb.array(values, BookValidators.atLeastOneAuthor);
}

jadequin · Accepted Answer · 2021-08-27 20:44:50Z

7

Good answer, but i had to modify it a bit to make it work. Here is my solution:

  static atLeastOneAuthor(): ValidatorFn {
    return (control: AbstractControl) => {
      const controlArray = control as FormArray;
      if (controlArray.controls.some(el => el.value)) {
        return null;
      } else {
        return {
          atLeastOneAuthor: { valid: false }
        }
      }
    }
  }

answered Aug 27, 2021 at 20:44

jadequin

861 silver badge2 bronze badges

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

1 Comment

Alain Boudard Over a year ago

Indeed, that's the "proper" solution. I don't get why we have to first type the parameter as "control" to then cast it as "group" or "array" for your example ... I'd have to dive a little deeper in the API I guess :)

Philip J. · Accepted Answer · 2021-03-01 23:36:02Z

1

The parameter calls for a factory function that returns a ValidatorFn, not the function itself. See the format here: https://angular.io/guide/form-validation#defining-custom-validators. Here is an edit to your code:

static atLeastOneAuthor(): ValidatorFn {
  return (controlArray: FormArray) => {
    if (controlArray.controls.some(el => el.value)) {
        return null;
    } else {
        return {
            atLeastOneAuthor: {
                valid: false
            }
        }
    }
  };
}

edited Mar 1, 2021 at 23:36

answered Mar 1, 2021 at 17:52

Philip J.

1942 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular 11 - Type '(controlArray: FormArray) => ValidationErrors | null' is not assignable to type 'ValidatorFn'

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related