1
votes

Le validateur angulaire vérifie si l'entrée est un nombre

J'essaie de valider le formulaire dans Angular 9 pour vérifier si la valeur d'une certaine entrée est un nombre (entier ou décimal).

J'ai donc créé le validateur personnalisé suivant:

import { AbstractControl, ValidationErrors } from '@angular/forms';

export class NumberValidator {
    static number(control: AbstractControl): ValidationErrors | null {
        if (typeof +control.value === "number") return null;
        return { notANumber: "The value is not a number"};
    };
}

Cela fonctionne très bien pour une entrée entière ou décimale, indiquant à mon que c'est valide, mais cela me dit également que la valeur de chaîne suivante, par exemple "foo", est valide.

Comment le peut Je corrige ça?

javascript typescript angular

1 commentaires

+ rend la chaîne comme NaN dont le type est le nombre le supprime

5 Réponses :

0
votes

Tout d'abord, le problème vient du fait que JavaScript renvoie le type de NaN à nombre . Alors peut-être ajouter une vérification supplémentaire si l'entrée n'est pas non plus égale à NaN .

0 commentaires

1
votes

"+" convertit la variable en nombre (+ control.value)

Donc, dans votre exemple, vous convertissez control.value en nombre, puis vérifiez si cette variable est un nombre. De cette façon, ce sera toujours un nombre

Vous devez vérifier:

if Number(control.value) == NaN 
// returns true if control.value is string
// else returns parsed number

0 commentaires

0
votes

Si l'utilisateur modifie la valeur dans l'entrée, la valeur devient une chaîne comme "123". Ceci est une chaîne mais (dans votre cas) elle doit être valide. Vous devez donc vérifier si cela est analysable.

Mieux: vous pouvez définir le type d'entrée de texte en nombre

<input type="number" ...

Ensuite, c'est toujours un nombre. de plus: vous pouvez définir les validateurs intégrés min et max: https://angular.io/api / forms / Validators

0 commentaires

2
votes

+ rend la chaîne comme NaN dont le type est le nombre le supprime. ou si vous devez cocher un plus de nombre alors

 if (typeof +control.value === "number" && !isNaN(+control.value)) return null;

0 commentaires

0
votes

L'inconvénient est que vous ne pouvez pas utiliser type = "number", vous devez utiliser type = "text" sur l'entrée mais. Mais voici ma solution en tant que ValidatorFn:

function notANumber(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const value = control.value
    let nV = value
    if (typeof value == 'string') {
      nV = value.replace(',', '.')
    }
    return (Number.isNaN(Number(nV)) && !control.pristine) ? {notANumber: true} : null;
  };
}

0 commentaires