Richtige Art und Weise zu beschränken-text-Eingabe von Werten (z.B. nur zahlen)

Nach der Tat viel Forschung schließlich habe ich eine Funktion erstellen, die erfüllen die Anforderung.
Die Funktion, die ich erstellt einschränken, alle Sonderzeichen und erlauben nur Buchstaben und Nummer.. und das funktioniert gut für beide, entweder du hast kopieren, einfügen und eingeben von beiden.
Hoffe, es funktioniert 🙂

 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)" />

Wie Sie -

1) Fügen Sie über die Methode in der Klasse component des ts-Datei.

2) Rufen Sie die Methode inputValidator($event) auf das Eingabe-event..

Getestet, Antwort Von mir:

form.html

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

form.Komponente.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);
 }

Einige der Antworten hat bei mir nicht funktioniert, also nahm ich die besten Stücke aus den Antworten (danke Jungs) und erstellt eine Eckige 5 der Richtlinie, der sollte den job (und mehr) für Sie. Es ist vielleicht nicht perfekt, aber es bietet Flexibilität.

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">

Ich denke, das wird Ihr problem lösen. Ich erstellt eine Richtlinie, welche Filter von den Eingaben des Benutzers und schränkt die Zahl oder text, die Sie wollen.

Diese Lösung ist für bis zu Ionic-3 und Eckig-4-Benutzer.

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;

  }


}

Ich denke, ein custom ControlValueAccessor ist die beste option.

Nicht getestet, aber soweit ich mich erinnere, sollte das funktionieren:

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

Anoher eine

<form [formGroup]="myForm" novalidate>
    <input type="text" class="form-control" id="data" name="data"
           formControlName="input3" #item (input)="change(item.value)">
</form>
{{myForm.value |json}}

change(value:string)
  {
    let lastchar = value.substr(value.length - 1);
    if (!(new RegExp('[0-9]').test(lastchar)))
    {
      value=value.substr(0,value.length-1);
      this.myForm.controls["input3"].setValue(value);

    }
  }

wenn Sie vom getriebenen Vorlage

  <input type="text" class="form-control" id="data" name="data"
       [(ngModel)]="data" #item (input)="change(item)">
   {{data}}

change(item:any)
  {
    let value=item.value;
    let lastchar = value.substr(value.length - 1);
    if (!(new RegExp('[0-9]').test(lastchar)))
    {
      value=value.substr(0,value.length-1);
      item.value=this.data=value;
    }
  }

Update Wie @BikashBishwokarma Kommentar, dieser nicht funktioniert, wenn Sie einfügen ein Zeichen in der Mitte. Wir können ändern Sie die Funktion von einigen wie

  change(item:any)
  {
    let value=item.value;
    let pos=item.selectionStart;
    if (!(new RegExp('^[0-9]+$').test(value)))
    {
      item.value=this.data=value.replace(/[^0-9]+/g, '');
      item.selectionStart = item.selectionEnd = pos-1;
    }
  }

Sehen, wie mainten die cursor-position

Alle zu fangen die Veranstaltung umliegenden Modell ändert,
kann erwägen,

<input (ngModelChange)="inputFilter($event)"/>

Erkennt es copy /paste, keyup, jede Bedingung, die ändert den Wert des Modells.

Dann:

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

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