web-dev-qa-db-fra.com

Angular 2 Validateur personnalisé: vérifier si la valeur d'entrée est un entier?

Dans un projet Angular2, je dois valider certaines entrées. Comment vérifier facilement si une valeur d'entrée est un entier?

J'ai essayé d'utiliser Number(control.value) qui renvoie 0 pour un champ vide - ce n'est pas bien.

ou parseInt(control.value,10) qui déconspecte les espaces:

Si j'ai quelque chose comme: 1 espace 0,24 = 1 ,024 il retourne 1 - qui passe le validateur sans erreur.

Lodash fonctionne comme: _.isInteger(control.value) ou _.isNumeric(control.value)// return false every time - attendu, car une valeur d'entrée est une chaîne et non un nombre.

La combinaison de méthodes comme celle-ci crée une fonction complexe avec de nombreuses instructions if/else, et même dans ce cas, je ne suis pas sûr de connaître tous les cas Edge. J'ai certainement besoin d'une approche plus directe. Des idées?

javascriptvalidationangularuser-input
6
AIon

C'est le moyen le plus propre que j'ai trouvé jusqu'à présent:

app.component.html: 

<input formControlName="myNumber">

app.component.ts: 

export class AppComponent {
    myNumber:FormControl

    constructor(private _ValidatorsService: ValidatorsService){
    }

    this.myNumber= new FormControl('defaultValue',
        [ Validators.required, this._ValidatorsService.isInteger ]);
}

validators.service.ts: 

function check_if_is_integer(value){
   // I can have spacespacespace1 - which is 1 and validators pases but
   // spacespacespace doesn't - which is what i wanted.
   // 1space2 doesn't pass - good
   // of course, when saving data you do another parseInt.

   return ((parseFloat(value) == parseInt(value)) && !isNaN(value));

}

@Injectable()
export class ValidatorsService {

   public isInteger = (control:FormControl) => {

        // here, notice we use the ternary operator to return null when value is the integer we want.
        // you are supposed to return null for the validation to pass.

        return check_if_is_integer(control.value) ? null : {
           notNumeric: true
        }
   }

}

Prendre plaisir!

6
AIon

Il suffit de créer un validateur personnalisé:

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

export function integer(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const error: ValidationErrors = { integer: true };

    if (control.value && control.value !== `${parseInt(control.value, 10)}`) {
      control.setErrors(error);
      return error;
    }

    control.setErrors(null);
    return null;
  };
}

puis utilisez-le dans votre formulaire:

import { integer } from '...';

form.get('yourControl').setValidators([integer()]);

cela fonctionnera même avec des entrées de type texte

2
Francesco Borzi