ERROR TypeError: Cannot call a class as a function

Question

I am using angular 13 and while building the app build is successful but when loading the app I am getting can not call class as a function, I am not able to figure out how to fix this can anyone help

core.mjs:6494 ERROR TypeError: Cannot call a class as a function
    at _classCallCheck (classCallCheck.js:3:1)
    at FormComponent.SpaceValidator (space.validator.ts:5:1)
    at forms.mjs:811:40
    at Array.map (<anonymous>)
    at executeValidators (forms.mjs:811:23)
    at FormControl._composedValidatorFn (forms.mjs:842:28)
    at FormControl._runValidator (forms.mjs:2534:38)
    at FormControl.updateValueAndValidity (forms.mjs:2511:32)
    at new FormControl (forms.mjs:2892:14)
    at FormBuilder.control (forms.mjs:7196:16)

its coming from spacevalidator when I remove this spacevalidator it works for me

 number: ["", [Validators.pattern(/^\S*$/), SpaceValidator.bind(this)]],

SpaceValidator

export class SpaceValidator {
    public cannotContainSpace(control: AbstractControl) : ValidationErrors | null {
        if((control.value as string).indexOf(' ') >= 0){

            return {cannotContainSpace: true}
        }
        return null;
    }
}

Answer 1

You're getting this error because you're trying to use a class as a function. SpaceValidator is a class. What the Reactive Form is expecting is a validator function. To fix this, you need to pass the form control a validator function explicitly from your class, like this:

 number: ["", [Validators.pattern(/^\S*$/), SpaceValidator.cannotContainSpace]],

And that should solve this error.