meta données pour cette page
  •  

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
certif:procedure:develop:angular:validator [2026/03/13 15:55] – [Les différents dx-validator] nicolascertif:procedure:develop:angular:validator [2026/03/13 17:05] (Version actuelle) – [L'organisation des tests] nicolas
Ligne 1: Ligne 1:
 +|{{:undo-2.svg?30|}}| [[certif:do#procedures|Retour au Dossier Organisationnel]]|
 +|{{:connexe.jpg?40|}} **Sujets connexes**|[[certif:procedure:develop:angular]]\\ [[certif:procedure:develop:angular:validator-detail]]|
 ====== Mise en place des dx-validator ====== ====== Mise en place des dx-validator ======
 ===== Les différents dx-validator ===== ===== Les différents dx-validator =====
Ligne 11: Ligne 13:
   * **custom** corresponds au type de validation que l'on souhaite (cf plus loin)   * **custom** corresponds au type de validation que l'on souhaite (cf plus loin)
     * ici custom = un validateur maison (il est déclaré dans [validationCallback]="customValidator.isValidBicFromDx")     * ici custom = un validateur maison (il est déclaré dans [validationCallback]="customValidator.isValidBicFromDx")
-==== Les différents validateur ==== 
-<WRAP info> 
-Les validateurs s'utilisent à l'intérieur d'un composant &lt;dx-validator&gt; via la balise &lt;dxi-validation-rule&gt;. 
-</WRAP> 
  
-====== Validateurs DevExtreme (Validation Rules) ======+__Pour aller plus loin :__ 
 +  * [[certif:procedure:develop:angular:validator-detail]] 
 +  * les validateurs "custum" **doivent** être déclaré dans la bibliothèque dans **custom-validation-rule.ts** et donc appelé via le service **customValidatorService**   
 +  * [[certif:procedure:develop:angular:validator-date]]
  
-^ Type ^ Description ^ Attributs principaux ^ +===== L'organisation des tests ===== 
-| required | Rend le champ obligatoire. | message | +Comme on l'a vu plus haut les validators sont regroupés en **validationGroup**\\ 
-| range | Vérifie qu'une valeur est comprise entre deux bornes (dates ou nombres). | min, max, message | +Dans le composant on va déclaré une série de procédures (pour une meilleur lecture on essaye de garder la nomenclature)
-| stringLength | Contrôle le nombre de caractères. | min, max, trim, message | +
-| pattern | Valide la saisie via une expression régulière (Regex). | pattern (ex: /[0-9]/), message | +
-| email | Vérifie que le format correspond à une adresse email. | message | +
-| compare | Compare la valeur avec un autre champ ou une constante. | comparisonTarget (fonction), comparisonType, message | +
-| numeric | Vérifie que la valeur est un nombre. | message | +
-| custom | Permet de créer une logique métier complexe en TypeScript. | validationCallback, message, reevaluate | +
-| async | Pour les validations nécessitant un appel API (ex: vérification unicité). | validationCallback (doit retourner une Promise/Observable) | +
- +
-Détails techniques des règles +
-==== Required (Obligatoire) ==== +
-C'est le plus commun. Il vérifie que la valeur n'est ni ''null'', ni ''undefined'', ni une chaîne vide.+
 <code> <code>
-<dxi-validation-rule type="required" message="Le nom est requis"></dxi-validation-rule> +  private Notification= inject(NotificationService)  
-</code> +   
- +  ngAfterViewInit() { 
-==== Range (Plage de valeurs) ==== +    //votre code ici si besoin 
-Indispensable pour les dates de naissance ou les montants. +    this.triggerValidation(); 
- +  }
-min : Valeur minimum autorisée. +
- +
-max : Valeur maximum autorisée. +
- +
-<code> +
-<dxi-validation-rule type="range" [max]="today" message="Date invalide"></dxi-validation-rule> +
-</code> +
- +
-==== Pattern (Regex) ==== +
-Idéal pour les codes postaux, numéros de téléphone ou formats spécifiques (IBAN). +
-<code> +
-<dxi-validation-rule type="pattern" pattern="^[0-9]{5}$" message="Code postal invalide"></dxi-validation-rule> +
-</code> +
- +
-==== Custom (Personnalisé) ==== +
-Utilisé quand les règles standards ne suffisent pas. La fonction de callback reçoit un objet contenant la valeur. +
-<code> +
-<dxi-validation-rule type="custom" [validationCallback]="maFonctionTS" message="Erreur métier"></dxi-validation-rule> +
-</code> +
- +
-==== Async (Asynchrone) ==== +
-Utilisé pour vérifier une donnée sur le serveur sans bloquer l'interface. +
-<code> +
-<dxi-validation-rule type="async" [validationCallback]="checkUserExists" message="Déjà utilisé"></dxi-validation-rule> +
-</code> +
- +
-Propriétés communes à toutes les règles +
-message : Le texte qui sera affiché dans le résumé d'erreurs (votre Toast). +
- +
-ignoreEmptyValue : (Boolean) Si ''true'', la règle n'est pas testée si le champ est vide (sauf pour la règle ''required'').+
  
-reevaluate : (Boolean) Force la règle à se re-valider même si la valeur n'a pas changé (utile pour les comparaisons entre deux champs).+  private triggerValidation() { 
 +    this.Notification.analyseStockValidation("infoBanque","Information bancaires"); 
 +  } 
 +   
 +  handleInfoBanqueChanged() { 
 +    // votre code si beoin 
 +    this.triggerValidation(); 
 +    this.infoBancairesChange.emit(JSON.stringify(this.infoBanque)) 
 +  } 
 +  </code> 
 +==== 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|