Expected validator to return Promise or Observable

Im trying to do a custom validation on Angular 5 but I’m facing the following error

Expected validator to return Promise or Observable

I just want to return an error to the form if the value doesnt match the required, heres my code:

This is the component where is my form

  constructor(fb: FormBuilder, private cadastroService:CadastroService) {
    this.signUp = fb.group({
      "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])],
      "email": ["", Validators.compose([Validators.required, Validators.email])],
      "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])],
      "cpf": ["", Validators.required, ValidateCpf]

This code is in the file with the validation I want to implement:

import { AbstractControl } from '@angular/forms';

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    return null;

Can someone help me? Does that type of validation only work with observables or can I do i without being a promise or observable? thanks

44 thoughts on “Expected validator to return Promise or Observable”

  1. It means that you have to add multiple validators in array


    With Error

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

    Above one throws error that validator to return Promise or Observable


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


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


  2. 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

  3. error:


    validators use only second parameter in inside array. not for outside array

  4. Validators.compose() is redundant;

    You can just pass an array. OP’s problem is caused by failure to wrap the validators in [] to make them an array, hence the minLength() one is assumed to be async and the resulting error message.

    I hope, this solution will help you. Thanks.

  5. This type of error usually occurs if u do something like this –

    name: ['',Validators.required, Validators.compose([Validators.minLength(3),Validators.maxLength(15)])]

    Change this to –

    name: ['', Validators.compose([Validators.required,Validators.minLength(3),Validators.maxLength(15)])]

    2nd field -> validators

  6. If you add multiple validators, then you need to add another third bracket ‘[]’ and inside that, you should put your validators. Like Below:

    this.yourForm= this.formBuilder.group({
        amount: [null, [Validators.required, Validators.min(1)]],
  7. 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

  8. Not directly related to the OP’s question, but I got the same error on a slightly different problem. I had an async validator, but I forgot to return an Observable (or Promise) from it.

    Here was my original async validator

    public availableEmail(formControl: FormControl) {
       if(formControl && formControl.value){
         return this.http.get('')

    The thing is, what if the if-statement is false? We do not return anything, and we get a runtime error. I added the return type (making sure the IDE complains if we do not return the correct type), and then I return of(true) in the case the if-sentence failing.

    Here is the updated async validator.

    public availableEmail(formControl: FormControl): Observable<any> {
       if(formControl && formControl.value){
         return this.http.get('someUrl');
       return of(true);
  9. I’ve been browsing online more than 2 hours today, yet I
    never found any interesting article like yours.
    It is pretty worth enough for me. In my view, if all site owners and bloggers made good
    content as you did, the web will be much more useful than ever before.


Leave a Comment