1
votes

Comment limiter l'entrée numérique angulaire à N décimales?

L'entrée ne doit pas accepter un nombre avec plus de N décimales. N est défini comme Entrée.

Par exemple, si N = 3 et que l'utilisateur souhaite saisir 123.3456. Il ne devrait être autorisé à entrer que 123.345.

Je voudrais répondre à quelque chose comme ceci:

<input type="number" [(ngModel)]="value" nDecimalsInput [decimals]="2">

Via une directive ou quoi que ce soit d'autre ... p>

typescript angular angular-directive angular-forms angular2-directives

1 commentaires

stackoverflow.com/questions/54460923/…

3 Réponses :

0
votes

Le masque de saisie fera l'affaire. Vous pouvez essayer une bibliothèque de npm ou créer la directive vous-même.

En vous cas où la bibliothèque est utilisée comme ceci:

<input type="number" [(ngModel)]="value" mask="0*.00">

0 commentaires

0
votes

Vous pouvez exécuter une fonction simple sur (keydown) = "maxLength ()"

maxLength() {
if (N && this.myFormControl.value.toString().split('.')[1].length === N) {
      return false;
    }
}

2 commentaires

Merci, mais this.myFormControl.value n'est pas mis à jour au moment du keydown. Il n'a toujours pas changé de valeur (le keydown est déclenché avant le changement de valeur)

@DjordjeMiladinovic, oui et c'est le comportement attendu et souhaité. Vous voulez vérifier si vous avez atteint la limite des nombres avant d'en saisir un nouveau. Donc, si votre N = 3 et votre nombre est 1.222 après avoir entré le chiffre suivant, la fonction maxLength vérifiera le nombre signifiant 1.222 et verra que la limite est atteinte et n'en ajoutera pas une autre en retournant 'faux'.

0
votes

Vous pouvez donc faire comme ceci pour remplacer ou accrocher à un événement (comme un changement ou une clé vers le haut):

<input type="text" name="field" ng-model="number" ui-number-mask="3">

Ou utilisez un masque comme: https://github.com/assisrafael/angular-input-masks et faites

parseFloat($(this).val()).toFixed(3)

0 commentaires