IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Afficher tooltip d'erreur sur pattern validator


Sujet :

Angular

  1. #1
    Membre averti
    Homme Profil pro
    Reconversion
    Inscrit en
    Novembre 2018
    Messages
    502
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : Novembre 2018
    Messages : 502
    Points : 300
    Points
    300
    Par défaut Afficher tooltip d'erreur sur pattern validator
    Hello !

    Je souhaite vérifier un champ input d'un form (un stepper de material) à l'aide d'un validator pattern couplé à un regex.
    Ce champ doit accueillir un code à 6 chiffres, si ce n'est pas le cas, j'affiche une tooltip d'erreur (une snackbar material)
    Problème : dès que je commence à saisir un chiffre, ma tooltip d'erreur s'affiche grace à la fonction "openSnackBar()" et lance une boucle infinie
    J'aimerais que la vérification se fasse uniquement au click du button

    le html

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <div class="prtMsg" *ngIf="referenceFormGroup.controls.reference.errors">
              <div class="errorMsg" *ngIf="referenceFormGroup.controls.reference.errors.pattern">
                <!-- Code boucle infinie -->
                {{ openSnackBar("une erreur est survenue") }}
              </div>
            </div>
     
            <div>
              <button mat-button matStepperNext>Suivant</button>
            </div>
    le ts :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
     refBarCodePattern = "[0-9]{6}";
     
      ngOnInit() {
        this.referenceFormGroup = this.formBuilder.group({
          reference: ['', [Validators.required, Validators.pattern(this.refBarCodePattern)]]
        });
      }
     
      openSnackBar(msg: string) {
        this.snackBar.open(msg);
      }
    Voici l'erreur que je récupère et qui boucle

    Nom : Capture.PNG
Affichages : 151
Taille : 8,1 Ko

    merci..

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    faut éviter de mettre des fonctions dans l'interpolation
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    {{ openSnackBar("une erreur est survenue") }}
    l'interpolation, ça doit être juste fait pour afficher le contenu de la variable

    dans la fonction du click

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
     
    onClick() {
     
          if (this.referenceFormGroup.get('reference').invalid) {
              this.openSnackBar("une erreur est survenue");
          }
    }

  3. #3
    Membre averti
    Homme Profil pro
    Reconversion
    Inscrit en
    Novembre 2018
    Messages
    502
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : Novembre 2018
    Messages : 502
    Points : 300
    Points
    300
    Par défaut
    merci tu es un chef comme d'habitude, je n'avais pas notion que les appels de fonction en interpolation etaient à éviter

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 24/07/2014, 11h30
  2. Erreur sur validation de checkbox
    Par philippef dans le forum Langage
    Réponses: 2
    Dernier message: 02/07/2008, 09h20
  3. [SPRING MVC]Erreur sur un Integer dans un Validator
    Par manuzinho dans le forum Spring Web
    Réponses: 2
    Dernier message: 31/08/2007, 15h58
  4. Erreur, argument non valide sur IE
    Par Babssss dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 30/03/2007, 07h08
  5. [Validator] Erreur sur validation d'url
    Par fif10 dans le forum Struts 1
    Réponses: 8
    Dernier message: 24/06/2006, 21h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo