Dans le cadre du développement d'une application pour un client, j'ai eu besoin de mettre en place une validation "conditionnelle", à savoir la possibilité de disposer d'un champ de formulaire qui dispose de validateurs en fonction d'un autre champ.

Sur les applications Angular, il est possible d'utiliser l'objet FormBuilder pour définir les règles de validation qui seront appliquées aux champs d'un formulaire :

this.form = this.formBuilder.group({
 workshopId: ['', Validators.compose([Validators.required])],
 name: ['', Validators.compose([Validators.required, Validators.maxLength(100)])],
 platform: ['', Validators.compose([Validators.required])],
 login: ['', Validators.compose([Validators.required])],
 password: ['', Validators.compose([Validators.required])]
});

Si le code précédent fonctionne bien, il impose cependant que l'ensemble des règles soit fixes hors, dans le cas présent, je dispose d'un autre champ HTML (platformUrl) qui doit lui aussi avoir des règles de validation en fonction de la valeur du champ "platform" :

<div class="form-group">
        <label for="platformField" translate="Credentials.Properties.Platform"></label>
        <select id="platformField" class="form-control" formControlName="platform" required>
          <option *ngFor="let platform of platforms" [value]="platform.id">{{ platform.text }}</option>
        </select>
      </div>

<div class="form-group">
        <label for="platformUrlField" translate="Credentials.Properties.PlatformUrl"></label>
        <input id="platformUrlField" class="form-control" formControlName="platformUrl">
      </div>

Pour contourner cette problématique, une solution potentielle est de s'abonner à l'évènement "onChange" :

<select id="platformField" class="form-control" formControlName="platform"
 required (change)="onPlatformChange($event.target.value)">

Dans la méthode onPlatformChange, on récupère l'élément sélectionné et, si celui-ci correspond à l'élément qui nous intéresse, nous utilisons la méthode setValidators pour venir rajouter un validateur sur le champ qui nous intéresse (ou le supprimer s'il n'est pas pertinent):

onPlatformChange(selectedPlatform: number): void {
  const isCorrect = Number(selectedPlatform) === Platform.Sharepoint;

  if (this.platformUrlField != null) {
    if (isCorrect) {
      this.platformUrlField.setValidators([Validators.required,
 Validators.maxLength(2048)]);
	} else {
	  this.platformUrlField.clearValidators();
        }

	this.platformUrlField.updateValueAndValidity();
    }
}

Il ne faut pas oublier d'appeler la méthode updateValueAndValidity, qui va recalculer le statut de validation du contrôle et le tour est joué! :)

Il est possible que cette méthode ne soit pas la plus optimisée et/ou la plus "propre" mais elle a le mérite de fonctionner (n'est-ce pas Hamza ;))!

Happy coding!