Comparer plusieurs champs

Supposons que notre formulaire ait des champs de date startDate et endDate et nous voulons nous assurer que startDate doit être avant endDate.

Pour implémenter des validations contenant un ou plusieurs contrôles frères, nous devons définir la fonction de validation à un niveau supérieur à celui des contrôles frères.

ngOnInit() : void
{
  this.formGroup = this.formBuilder.group(
  {
    startDate : new FormControl({
      value    : null,
      disabled : false
    }, [ Validators.required ]),
    endDate : new FormControl({
      value    : null,
      disabled : false
    }, [ Validators.required ]),
  },
  // NOTE Validateur de haut niveau
  { validator : DateValidator.dateRangeValidator });
}

Ensuite, nous définissons un validateur personnalisé dans un fichier séparé, par exemple date.validator.ts.

// Angular modules
import { Injectable }       from '@angular/core';
import { AbstractControl }  from '@angular/forms';
import { ValidationErrors } from '@angular/forms';

@Injectable({
  providedIn : 'root'
})
export class DateValidator
{
  constructor() {}

  public static dateRangeValidator(control : AbstractControl) : ValidationErrors | null
  {
    // NOTE Contrôle de sécurité
    if (!control.get('startDate').value || !control.get('endDate').value)
      return null;

    // NOTE Comparaison de champs
    // const mStart  = moment(control.get('startDate').value);
    // const mEnd    = moment(control.get('endDate').value);
    // const isValid = mStart.isBefore(mEnd);

    // NOTE Invalide
    if (!isValid)
      return { invalidDateRange : true };

    // NOTE Valide
    return null;
  }
}

Si invalide, retourne un objet d'erreur (n'importe quel nom arbitraire), comme, return { invalidEndDate: true }.

Assurez-vous qu'il renvoie toujours un null pour les cas valides ou non pertinents, et un objet "non-null" dans les cas où une erreur doit être déclenchée sur le formGroup.

Pour afficher l'erreur au niveau de notre vue, nous utilisons la clé invalidDateRange retournée par notre validateur.

<div *ngIf="formGroup.hasError('invalidDateRange')">
  La date de début n'est pas antérieure à la date de fin
</div>