web-dev-qa-db-fra.com

Angular 5 Validators.pattern regex pour seulement les nombres

J'ai du mal à faire fonctionner le Angular 5 Validators.pattern. J'ai essayé tous les regex qui DEVRAIENT fonctionner normalement, mais cela ne fonctionne pas. J'ai lu que Validators.pattern nécessite un format différent , mais je n'arrive pas à le trouver ...

Toutes les idées que devrait être le Validators.pattern

(1) autoriser uniquement les nombres, positifs et négatifs

et

(2) autorise uniquement les nombres, positifs et négatifs, avec éventuellement jusqu'à 2 décimales

Des exemples valides seraient: 1 1.2 1.22 -21 -21.48

Tout ce qui contiendrait une lettre serait invalide.

Merci de votre aide!

regexangularangular5
7
Matt

Après avoir essayé tant d'expressions regex, aucune ne fonctionnait dans Safari. Voici donc ce que j'ai fait ...

Tout d'abord, j'ai utilisé l'expression régulière lors de la création du contrôle de formulaire:

new FormControl({value: field.value}, [Validators.required, Validators.pattern(/^-?(0|[1-9]\d*)?$/)])

Ensuite, dans l'entrée elle-même, j'ai ajouté un événement (entrée):

<input matInput (input)="validateInput(field)" [placeholder]="field.label" type="number" [formControlName]="field.id" [id]="field.id">

Et cette fonction ressemble à ceci:

validateInput(field) {

    this.detailForm.patchValue({ [field.id]: this.detailForm.controls[field.id].value }); }

}

Si vous entrez un caractère non valide (par exemple a-z) dans Safari, il ne le stocke pas dans la valeur du contrôle de champ. Il n'y stocke que des valeurs valides (nombres). Donc, je corrige simplement la valeur avec la valeur stockée - si elle est valide, avec des nombres, ça va; s'il n'est pas valide, avec d'autres caractères, il remplacera l'entrée par une chaîne vide.

Fonctionne parfaitement sur tous les navigateurs. J'espère que cela aide quelqu'un :)

18
Matt

N'oubliez pas d'utiliser des guillemets et une double barre oblique inverse pour que votre regex fonctionne comme il est supposé Validators.pattern('\\-?\\d*\\.?\\d{1,2}') ou vous pouvez faire une variable pour cela

const regexPattern = /\-?\d*\.?\d{1,2}/;
Validators.pattern(regexPattern);
4
Yevheniy Potupa

Celui-ci fonctionne pour moi dans Angular 7

    const numericNumberReg= '^-?[0-9]\\d*(\\.\\d{1,2})?$';

this.$form = this.$builder.group({
      cost: ['', [Validators.required,Validators.pattern(numericNumberReg)]],
    });
2
San Jaisy

Vous pouvez essayer avec cette expression régulière '^ -? [0-9]\d * (\.\D {1,2})? $'. Et votre générateur de formulaire sera comme ci-dessous:

 this.yourForm= this.formBuilder.group({
      amount: [this.amount, [Validators.required, Validators.pattern('^-?[0-9]\\d*(\\.\\d{1,2})?$')]]
});
1
Abdus Salam Azad

Autorisez uniquement les nombres entiers sans symboles.

Validators.pattern(/^[0-9]\d*$/)

Les chiffres commencent par un

Validators.min(1)
0
Andriy Danylko