Angular2: comment appliquer deux ou plusieurs validateurs au même contrôle?

Question

Je crée un formulaire avec Angular2 et j'ai créé deux validateurs personnalisés pour le champ d'adresse email.

Le premier validateur vérifie la validité de l'e-mail, le second validateur (asynchrone) vérifie si l'adresse e-mail existe déjà dans la base de données. En outre, je voudrais ajouter un troisième validateur pour une autre vérification.

Voici mon code:

'email': ['', [validateEmail(), thirdValidator()], asyncValidator] 

Le comportement que je veux est la suivante: uniquement lorsque le premier validateur valide le contrôle, le second validateur doit commencer. Et seulement lorsque le deuxième validateur se termine, le troisième validateur peut commencer sa validation.

Comment l'atteindre?

Answer 1

méthode Validators.compose doit faire le travail, par exemple:

let formControls = { 
     'oldPassword': new FormControl({ value: ''}), 
     'newPassword': new FormControl({ value: ''}, Validators.compose([customValidator1, customValidator2]), customAsyncValidator) 
    }; 

Composées validateurs fonctionnent simultanément, ce qui signifie que nous pouvons avoir de multiples erreurs sur le contrôle en même temps (chaque validateur attache sa propre erreur si validation a échoué). Si nous n'avons besoin que d'une seule erreur sur le contrôle à la fois, nous pouvons «enchaîner» les validateurs en vérifiant l'état de la validation précédente avant d'effectuer le suivant. Quelque chose comme ceci:

let customValidator2 = (ctrl: FormControl): any => { 
     if(ctrl.hasError('customValidationError1')) { 
      // there is the error attached by customValidator1, 
      // skip executing customValidator2 (nullify its error) 
      return null; 
     } 

     let isInvalid = true; // some condition... 

     return isInvalid ? { customValidationError2: true } : null; 
    } 

De cette façon, nous pouvons accomplir 'commander' les validateurs par leur priorité par exemple.