Question Angular2 moyen approprié pour restreindre les valeurs de saisie de texte (par exemple, uniquement les nombres)


Est-il possible d'implémenter une entrée qui permet de ne saisir que des nombres à l'intérieur sans manipulation manuelle de event.target.value?

En réaction, il est possible de définir value propriété et le changement d’entrée après sera lié à la valeur (impossible de le modifier sans value changement). Voir Exemple Et cela fonctionne très bien sans aucun effort.

Dans angular2 il est possible de définir [value] - mais il ne vous reste plus qu'à définir la valeur initialement, et les modifications ne sont pas empêchées par la suite.

Je jouais avec ngModel et [value] / (input), voir Exemple.

Mais dans les deux cas, il y a un problème essentiel:

  1. lorsque vous tapez 10 (la valeur du modèle est 10, la valeur d'entrée est 10) - correct
  2. lorsque vous tapez 10d après (la valeur du modèle est 10 - non modifiée, tous les chiffres ont été supprimés, la valeur d'entrée est 10d) - incorrecte car la valeur du modèle est la même qu'avant
  3. lorsque vous tapez 10d3 - (la valeur du modèle est 103; la valeur d'entrée est 103) - correct

Comment faire ce composant simple (du premier coup d’œil) sans manipuler manuellement event.target.value? ...

METTRE À JOUR Je ne cherche pas le HTML5 natif input[number] élément ici. La saisie des chiffres est juste pour l'exemple - il pourrait y avoir beaucoup plus de tâches lorsque je dois restreindre le texte saisi.

De plus, l'entrée: le numéro est 1) ne m'empêche pas de taper 10ddd et 2) (moins important) contient des flèches dont je n’ai pas besoin.

Et le problème ici est de prévenir utilisateur de taper quelque chose au-delà des valeurs restreintes, au lieu de permettre entrer quelque chose et valider après


24
2018-05-25 11:18


origine


Réponses:


Dans component.ts, ajoutez cette fonction

_keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.charCode);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
}

Dans votre modèle, utilisez ce qui suit

<input(keypress)="_keyPress($event)">

Cela capturera l'entrée avant qu'angular2 n'attrape l'événement.


30
2017-10-21 08:48



Le plugin inputmask fait le meilleur travail de ceci. C'est extrêmement flexible en ce sens que vous pouvez fournir n'importe quelle regex que vous souhaitez limiter les entrées. Il ne nécessite pas non plus JQuery.

Etape 1: Installez le plugin:

npm install --save inputmask

Etape 2: créer une directive pour envelopper le masque de saisie:

import {Directive, ElementRef, Input} from '@angular/core';
import * as Inputmask from 'inputmask';


@Directive({
  selector: '[app-restrict-input]',
})
export class RestrictInputDirective {

  // map of some of the regex strings I'm using (TODO: add your own)
  private regexMap = {
    integer: '^[0-9]*$',
    float: '^[+-]?([0-9]*[.])?[0-9]+$',
    words: '([A-z]*\\s)*',
    point25: '^\-?[0-9]*(?:\\.25|\\.50|\\.75|)$'
  };

  constructor(private el: ElementRef) {}

  @Input('app-restrict-input')
  public set defineInputType(type: string) {
    Inputmask({regex: this.regexMap[type], placeholder: ''})
      .mask(this.el.nativeElement);
  }

}

Étape 3:

<input type="text" app-restrict-input="integer">

Découvrez leur documents github pour plus d'informations.


14
2018-02-18 21:01



Vous pouvez utiliser l'entrée HTML5 du type numéro

Il n'accepte aucun caractère dans sa déclaration

<input type="number" [(model)]='myvar' min=0 max=100 step=5 />

Voici un exemple de son utilisation avec angular 2 [(model)]

http://www.webpackbin.com/VJNUNF0M-


6
2018-05-25 12:07



Testé Réponse par moi:

form.html

<input type="text" (keypress)="restrictNumeric($event)">

form.component.ts:

public restrictNumeric(e) {
  let input;
  if (e.metaKey || e.ctrlKey) {
    return true;
  }
  if (e.which === 32) {
   return false;
  }
  if (e.which === 0) {
   return true;
  }
  if (e.which < 33) {
    return true;
  }
  input = String.fromCharCode(e.which);
  return !!/[\d\s]/.test(input);
 }

6
2017-12-22 22:51



Après avoir fait beaucoup de recherches, j'ai enfin créé une fonction qui remplit entièrement les exigences. La fonction que j'ai créée restreint tous les caractères spéciaux et n'autorise que les alphabets et les chiffres. Et cette fonction fonctionne bien pour les deux si vous avez copié et tapé les deux. Esperons que ça marche :)

 public inputValidator(event: any) {
    //console.log(event.target.value);
    const pattern = /^[a-zA-Z0-9]*$/;   
    //let inputChar = String.fromCharCode(event.charCode)
    if (!pattern.test(event.target.value)) {
      event.target.value = event.target.value.replace(/[^a-zA-Z0-9]/g, "");
      // invalid character, prevent input

    }
  }

     <input type="text" [(ngModel)]="abc.abc" (input)="inputValidator($event)" />

Comment vous utilisez -
1) Ajoutez la méthode ci-dessus dans votre composant de classe du fichier ts.
2) Appelez la méthode inputValidator ($ event) sur l'événement d'entrée.


4
2018-02-22 12:42



Certaines des réponses n'ont pas fonctionné pour moi, alors j'ai pris les meilleures parties de certaines réponses (merci les gars) et créé une directive angulaire 5 qui devrait faire le travail (et plus encore) pour vous. Ce n'est peut-être pas parfait mais cela offre de la flexibilité.

import { Directive, HostListener, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({
selector: '[appInputMask]'
})
export class InputMaskDirective {
@Input('appInputMask') inputType: string;

showMsg = false;
pattern: RegExp;

private regexMap = { // add your own
integer: /^[0-9 ]*$/g,
float: /^[+-]?([0-9]*[.])?[0-9]+$/g,
words: /([A-z]*\\s)*/g,
point25: /^\-?[0-9]*(?:\\.25|\\.50|\\.75|)$/g,
badBoys: /^[^{}*+£$%\\^-_]+$/g
};

constructor(public el: ElementRef, public renderer: Renderer2) { };

@HostListener('keypress', ['$event']) onInput(e) {
this.pattern = this.regexMap[this.inputType]
const inputChar = e.key;
this.pattern.lastIndex = 0; // dont know why but had to add this

if (this.pattern.test(inputChar)) {
   // success
  this.renderer.setStyle(this.el.nativeElement, 'color', 'green'); 
  this.badBoyAlert('black');
} else {

  this.badBoyAlert('black');
   //do something her to indicate invalid character
  this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
  e.preventDefault();

}

  }
  badBoyAlert(color: string) {
    setTimeout(() => {
      this.showMsg = true;
      this.renderer.setStyle(this.el.nativeElement, 'color', color);
    }, 2000)
  }

  }

HTML      <input class="form-control" appInputMask="badBoys">


3
2017-11-16 13:29



Je pense que cela va résoudre votre problème. J'ai créé une directive qui filtre les entrées de l'utilisateur et restreint le nombre ou le texte que vous souhaitez.

Cette solution est destinée aux utilisateurs Ionic-3 et Angular-4.

import { Directive, HostListener, Input } from '@angular/core';
import { Platform } from 'ionic-angular';

/**
 * Generated class for the AlphabateInputDirective directive.
 *
 * See https://angular.io/api/core/Directive for more info on Angular
 * Directives.
 */
@Directive({
  selector: '[keyboard-input-handler]' // Attribute selector
})
export class IonicKeyboardInputHandler {

  @Input("type") inputType: string;

  isNumeric: boolean = true;
  str: string = "";
  arr: any = [];  

  constructor(
    public platForm: Platform
  ) {
    console.log('Hello IonicKeyboardInputHandler Directive');
  }


  @HostListener('keyup', ['$event']) onInputStart(e) {   

    this.str = e.target.value + '';

    this.arr = this.str.split('');

    this.isNumeric = this.inputType == "number" ? true : false; 

    if(e.target.value.split('.').length === 2){
      return false;
    }    

    if(this.isNumeric){
      e.target.value = parseInt(this.arr.filter( c => isFinite(c)).join(''));
    }      
    else
      e.target.value = this.arr.filter( c => !isFinite(c)).join('');        

    return true;

  }


}

1
2017-10-29 11:17



<input type="number" onkeypress="return event.charCode >= 48 && event.charCode <= 57" ondragstart="return false;" ondrop="return false;"> 

Les données saisies acceptent uniquement les nombres, mais ce n'est que temporaire.


1
2018-01-29 07:31



Je pense une coutume ControlValueAccessor est la meilleure option.

Non testé mais pour autant que je m'en souvienne, cela devrait fonctionner:

<input [(ngModel)]="value" pattern="[0-9]">


0
2018-05-25 11:59