1
votes

Zone de texte avec des chiffres uniquement

Je peux voir partout la suggestion suivante est recommandée pour avoir une zone de texte avec des chiffres uniquement:

 <input  formControlName="imo" class="form-control" pattern="\d*" maxlength="8">

Mais pour moi, je peux saisir des caractères et je ne suis pas limité aux chiffres. J'utilise la dernière version de Crome. Est-ce un effet secondaire du formControlName dans mon application Angular ou ai-je mal compris la partie du modèle?

angular html

5 commentaires

pourquoi ne pas utiliser input [type = "number"]?

angular.io/api/forms/PatternValidator

Merci @niklaz. Je serais heureux aussi. Mais alors je ne peux pas contrôler la longueur maximale du nombre. J'ai besoin que les utilisateurs soient capables de saisir seulement 5 chiffres.

OK, puis utilisez

3 Réponses :

-1
votes

Bonjour, avez-vous essayé ci-dessous

\ d + au lieu de \ d *

1 commentaires

Pensez à déplacer ces types de réponses pour qu'elles ne soient que dans les commentaires, car cela n'est pas sûr d'être utile pour le développeur qui a posé la question.

0
votes

Je pense que c'est ce que vous recherchez:

<input type="number" formControlName="imo" class="form-control" min="1" max="5">

6 commentaires

Merci. Le nombre et la longueur maximale ne fonctionnent pas ensemble.

J'ai essayé ça aussi. Et comme vous, je m'attendrais à ce que cela fonctionne comme ça. Cependant, je peux entrer 9999999 pour ce qui suit: . Je ne sais pas si Angular empêche le comportement par défaut de HTML 5 ou si nous avons mal compris l'utilisation de min max.

Eh bien, cela vous permettra d'entrer n'importe quel nombre mais ce ne sera pas valide

Merci @GaryB. Qu'est-ce que cela signifie que ce n'est pas valide? Je viens d'essayer Angular et cela risque de déclencher des erreurs sur les formulaires réactifs. Je dois donc empêcher l'utilisateur de se soumettre.

DWT est requis

Mais c'est peu en dehors de la question initiale. Voudrait s'en tenir aux attributs HTML5 si possible. Si je définis le type comme nombre, cela empêche l'utilisateur d'ajouter autre chose. Je m'attendrais à la même chose avec max et min?

pour le premier: j'avais l'habitude de désactiver le bouton d'envoi si le formulaire n'est pas valide: pour le second, si l'utilisateur utilise les steppers sur l'entrée cela fonctionnera mais s'ils saisissent un numéro, cela ne fonctionnera pas

1
votes

pattern vérifie simplement si la valeur est valide ou non, elle n'interfère pas avec ce que l'utilisateur tape. Si vous souhaitez autoriser uniquement les valeurs numériques et que les chiffres saisis ne dépassent pas 5 (comme vous le dites dans le commentaire), vous pouvez le faire:

checkValue(event) {
  return event.target.value.length === 5 ? event.preventDefault() : 
    String.fromCharCode(event.charCode).match(/[^0-9]/g) === null
}

et la fonction: p>

<input type="text" formControlName="imo" (keypress)="checkValue($event)">

StackBlitz

Cela bloquera en fait l'entrée. Si cela convient avec des valeurs non bloquantes, vous pouvez continuer et utiliser Validators.pattern () , puis afficher simplement un message d'erreur lorsque l'utilisateur tape quelque chose qu'il ne devrait pas.

2 commentaires

C'était ce à quoi je m'attendais. Que vous aviez besoin d'une sorte de vérification javascript pour chaque pression de touche. Mais donne la fonctionnalité que je recherche. Merci!

Super, heureux d'entendre que je pourrais aider! :)