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:

---

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:

---

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

Pièce jointe 600043

merci..

faut éviter de mettre des fonctions dans l'interpolation

Code:

---

1 2	{{ openSnackBar("une erreur est survenue") }}

---

l'interpolation, ça doit être juste fait pour afficher le contenu de la variable

Code:

---

1 2	{{myVariable}}

---

dans la fonction du click

Code:

---

1 2 3 4 5 6 7 8

onClick() {   if (this.referenceFormGroup.get('reference').invalid) { this.openSnackBar("une erreur est survenue"); } }

---

merci tu es un chef comme d'habitude, je n'avais pas notion que les appels de fonction en interpolation etaient à éviter