javascriptangularangular5angular-formsangular-validation

Expected validator to return Promise or Observable


I'm 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 doesn't match the required, here's my code:

This is the component where my form is

  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;
}

Does that type of validation only work with observables or can I do it without being a promise or observable?


Solution

  • 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]]