When you try to add multiple custom validation as below for reactive form in angular.

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

Solution

you have to add multiple validators in an array

. Example:

With Error

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

Above one throws the 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 be given in array in 2nd position, when multiple validators used.

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

Java 8 | Spring | React | Angular | CI/CD | Microservices | Monitoring |Apache Kafka. https://www.linkedin.com/in/shuaib-kunhabdulla-83780188