web-dev-qa-db-fra.com

Validation du numéro de type d'entrée "valeur numérique uniquement"

Comment valider une entrée de type="number" pour qu'elle ne soit valide que si la valeur est numérique ou nulle en utilisant uniquement des formulaires réactifs (pas de directives)?
Seuls les nombres [0-9] et. sont autorisés, pas de "e" ni aucun autre caractère.

Ce que j'ai essayé jusqu'à présent:

Modèle:

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

Composant:

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator:

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

Plunker

Le problème est lorsqu'un utilisateur entre quelque chose qui n'est pas un nombre ("123e" ou "abc")} _ la valeur du FormControl devient null, gardez à l'esprit que je ne veux pas que le champ soit obligatoire, donc si le champ est vraiment vide null la valeur doit être valide.

La prise en charge de plusieurs navigateurs est également importante (les champs de saisie du numéro de Chrome ne permettent pas à l'utilisateur de saisir des lettres - à l'exception de "e", contrairement à FireFox et Safari).

formsangularvalidation
15
Mihailo

Dans un fichier HTML, vous pouvez ajouter ngIf pour votre motif comme ceci

<div class="form-control-feedback" *ngIf="Mobile.errors && (Mobile.dirty || Mobile.touched)">
        <p *ngIf="Mobile.errors.pattern" class="text-danger">Number Only</p>
      </div>

Dans le fichier .ts, vous pouvez ajouter le motif Validators - "^ [0-9] * $"

this.Mobile = new FormControl('', [
  Validators.required,
  Validators.pattern("^[0-9]*$"),
  Validators.minLength(8),
]);
14
Ishara Madawa

Le moyen le plus simple serait d’utiliser une bibliothèque comme celle-ci one et vous voulez que noStrings soit vrai

    export class CustomValidator{   // Number only validation   
      static numeric(control: AbstractControl) {
        let val = control.value;

        const hasError = validate({val: val}, {val: {numericality: {noStrings: true}}});

        if (hasError) return null;

        return val;   
      } 
    }
1
luanped

Parfois, il est simplement plus facile d'essayer quelque chose de simple comme celui-ci.

validateNumber(control: FormControl): { [s: string]: boolean } {

  //revised to reflect null as an acceptable value 
  if (control.value === null) return null;

  // check to see if the control value is no a number
  if (isNaN(control.value)) {
    return { 'NaN': true };
  }

  return null; 
}

J'espère que cela t'aides.

mis à jour selon le commentaire, Vous devez appeler le validateur comme ceci 

number: new FormControl('',[this.validateNumber.bind(this)])

La liaison (ceci) est nécessaire si vous mettez le validateur dans le composant, comme je le fais.

0
Ken

Vous devez utiliser des expressions régulières dans votre validateur personnalisé. Par exemple, voici le code qui n'autorise que 9 chiffres dans les champs de saisie:

function ssnValidator(control: FormControl): {[key: string]: any} {
  const value: string = control.value || '';
  const valid = value.match(/^\d{9}$/);
  return valid ? null : {ssn: true};
}

Jetez un oeil à un exemple d'application ici:

https://github.com/Farata/angular2TypeScript/tree/master/Angular4/form-samples/src/app/reactive-validator

0
Yakov Fain