Discussion :

[olivier252]

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



merci..