Estoy tratando de hacer una validación personalizada en Angular 5 pero me encuentro con el siguiente error
Expected validator to return Promise or ObservableSolo quiero devolver un error al formulario si el valor no coincide con el requerido, aquí está mi código:
Este es el componente donde está mi formulario.
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] }) }Este código está en el archivo con la validación que quiero implementar:
import { AbstractControl } from '@angular/forms'; export function ValidateCpf(control: AbstractControl){ if (control.value == 13445) { return {errorCpf: true} } return null; }¿Ese tipo de validación solo funciona con observables o puedo hacerlo sin ser una promesa u observable?
Significa que debe agregar múltiples validadores en la matriz
. Ejemplo:
con error
profileFormGroup = { budget: [null, Validators.required, Validators.min(1)] };Arriba, uno arroja un error que validador para devolver Promise u Observable
Arreglar:
profileFormGroup = { budget: [null, [Validators.required, Validators.min(1)]] };Explicación:
En la validación de forma reactiva angular realizada mediante el uso de validadores incorporados que podrían proporcionarse en una matriz en la segunda posición, cuando se usaron múltiples validadores .
FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]
Lo siguiente debería funcionar:
"cpf": ["", [Validators.required, ValidateCpf]]los argumentos que espera el control de formulario son los siguientes:
constructor(formState: any = null, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null)Creo que es bueno aclarar además de la respuesta aceptada que el error ocurre porque al usar formularios reactivos para crear un FormControl, después de initial_value los siguientes argumentos son, respectivamente, validadores síncronos y validadores asíncronos agrupados en forma de matriz cada uno . P.ej:
myFormGroup = this.fb.group({ myControl: ['', [ mySyncValidators ], [ myAsyncValidators ] ] })Si el control tiene solo uno de los dos, Angular lo acepta como un solo elemento. P.ej:
myFormGroup = this.fb.group({ myControl: ['', mySyncValidator, myAsyncValidator ] }) Por lo tanto, al olvidar los corchetes para agruparlos, Angular asume que el segundo elemento del validador es parte de los validadores Async y así obtenemos que el Expected validator to return Promise or Observable