Validateur personnalisé angulaire 2+ "requis si" un autre champ est rempli

Question

J'essaie de créer un validateur personnalisé pour un formulaire piloté par un modèle où si un champ est rempli dans un autre devient obligatoire, mais si le premier champ est vide, le la deuxième n'est pas nécessaire non plus. En suivant les exemples (typescript) dans les docs pour construire une directive de validateur personnalisée, je peux la faire tourner sur un champ et lui passer le nom d'une autre. Maintenant, voici mes questions ...

Si une valeur est entrée dans le champ un et que je vérifie que le champ 2 est vide, comment puis-je définir "invalide" sur le champ 2? (Je me rends compte que j'ai accès à son AbstractControl).

Si j'ai défini moi-même "invalide" sur le champ 2, ai-je besoin d'un validateur distinct sur le champ 2 pour supprimer son statut invalide lorsqu'il est rempli?

Ou devrais-je ajouter le validateur "requis" intégré sur le champ 2 lorsque le validateur pour le champ un est déclenché (et si oui, comment)?

Un grand merci pour les pointeurs!

Answer 1

Je pense que vous pouvez réaliser ce que vous recherchez sans un validateur personnalisé.

Le code ci-dessous provient d'un formulaire piloté par un modèle - liant la directive de validation required sur le deuxième champ à la valeur ngModel du premier champ. Donc, ici, vous avez une validation conditionnelle appliquée au deuxième champ, lorsque le premier champ a une valeur.

First: <input type="text" name="first" [(ngModel)]="theFirst" #first="ngModel" > 

Second: <input type="text" ngModel [required]="theFirst ? true : null " #second="ngModel" name="second"/> 

<div *ngIf="second.errors"> 
    <span [hidden]="!second.errors.required">Second is required</span> 
</div> 

D'autres discussions sur les liaisons de validation conditionnelle est here.