web-dev-qa-db-fra.com

Validateur attendu pour retourner Promise ou Observable

J'essaie de faire une validation personnalisée sur Angular 5 mais je suis confronté à l'erreur suivante

Expected validator to return Promise or Observable

Je veux juste renvoyer une erreur au formulaire si la valeur ne correspond pas à la valeur requise, voici mon code:

Ceci est le composant où est ma forme

  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]
    })     
   }

Ce code est dans le fichier avec la validation que je veux implémenter:

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

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

Est-ce que quelqu'un peut m'aider? Ce type de validation ne fonctionne-t-il qu'avec des observables ou puis-je le faire sans être une promesse ou observable? Merci

javascriptangularangular5angular-formsangular-validation
32
Renê Silva Lima

Cela signifie que vous devez ajouter plusieurs validateurs dans un tablea

. Exemple:

avec erreur

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

Au-dessus, une erreur est générée le validateur renvoie la promesse ou l'observable

Correction:

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

Explication:

In angular Validation de formulaire réactif effectuée à l'aide de validateurs intégrés pouvant être donnés dans un tableau en deuxième position, lorsque plusieurs validateurs utilisés.

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

63
vimal dhanush

Ce qui suit devrait fonctionner:

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

les arguments attendus par le contrôle de formulaire sont les suivants:

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

à partir de https://angular.io/api/forms/FormControl

33
Deblaton Jean-Philippe

Validators.compose () est redondant;

Vous pouvez simplement passer un tableau. Le problème de OP est causé par l’échec de l’enveloppement des validateurs dans [] pour en faire un tableau. Par conséquent, minLength () est supposé être asynchrone et le message d’erreur résultant.

J'espère que cette solution vous aidera. Merci.

1
Kamlesh

error: userName: ['', [Validators.required, Validators.minLength (3)], forbiddenNameValidator (/ password /)],

ans: userName: ['', [Validators.required, Validators.minLength (3), allowediddenNameValidator (/ password /)]],

les validateurs utilisent uniquement un second paramètre dans un tableau intérieur. pas pour tableau extérieur

0
user1934070