Table des matières

Retour au Dossier Organisationnel
Sujets connexesANGULAR : Installation, Bonne pratique, Astuces...
Validateurs DevExtreme (Validation Rules)

Mise en place des dx-validator

Les différents dx-validator

A l'intérieur d'une zone de saisie devetrem (<dx-text-box>, <dx-check-box>, <dx-date-box>…), il est possible de mettre en place des validateurs de saisie
il se présente sous la forme

  <dx-validator validationGroup="infoBanque">
       <dxi-validation-rule type="custom" [validationCallback]="customValidator.isValidBicFromDx" message="Le BIC est invalide"/>
  </dx-validator>

Pour aller plus loin :

L'organisation des tests

Comme on l'a vu plus haut les validators sont regroupés en validationGroup
Dans le composant on va déclaré une série de procédures (pour une meilleur lecture on essaye de garder la nomenclature)

  private Notification= inject(NotificationService) 
  
  ngAfterViewInit() {
    //votre code ici si besoin
    this.triggerValidation();
  }

  private triggerValidation() {
    this.Notification.analyseStockValidation("infoBanque","Information bancaires");
  }
  
  handleInfoBanqueChanged() {
    // votre code si beoin
    this.triggerValidation();
    this.infoBancairesChange.emit(JSON.stringify(this.infoBanque))
  }
  

Le service "Notification"

Il publie plusieurs fonctions :

analyseStockValidation(validateGroup:string, nomBloc:string)validateGroup est le nom du groupe de test (on peut en avoir plusieurs dans un même composant)
nomBloc sert à l'affichage à indiquer à l'utilisateur ou se trouve les champs à corriger