Expected validator to return Promise or Observable Expected validator to return Promise or Observable angular angular

Expected validator to return Promise or Observable


It means that you have to add multiple validators in array

.Example:

With Error

profileFormGroup = {  budget: [null, Validators.required, Validators.min(1)]};

Above one throws error that validator to return Promise or Observable

Fix:

profileFormGroup = {  budget: [null, [Validators.required, Validators.min(1)]]};

Explanation:

In angular Reactive form validation done by using in-built validators which could given in array in 2nd postion, when multiple validators used.

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]


The following should work :

  "cpf": ["", [Validators.required, ValidateCpf]]

the arguments the form control expects are the following :

constructor(formState: any = null,             validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,            asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null)

from https://angular.io/api/forms/FormControl


I think it is good to clarify in addition to the accepted answer that the error happens because when using reactive forms for creating a FormControl, after the initial_value the following arguments are, respectively, synchronous validators and async validators grouped in the form of an array each. E.g:

myFormGroup = this.fb.group({    myControl: ['', [ mySyncValidators ], [ myAsyncValidators ] ]})

If the control happens to have just one of either, Angular accepts it as a single element. E.g.:

myFormGroup = this.fb.group({    myControl: ['', mySyncValidator, myAsyncValidator ]})

Therefore, when forgetting about the brackets for grouping them Angular assumes the second validator item is part of the Async validators and so we get the Expected validator to return Promise or Observable