angular - Proper way to restrict text input values (e.g. only numbers)

ID : 131333

viewed : 8

Tags : angularangular

Top 5 Answer for angular - Proper way to restrict text input values (e.g. only numbers)

vote vote

98

In component.ts add this function

_keyUp(event: any) {     const pattern = /[0-9\+\-\ ]/;     let inputChar = String.fromCharCode(event.key);      if (!pattern.test(inputChar)) {       // invalid character, prevent input       event.preventDefault();     } } 

In your template use the following

<input(keyup)="_keyUp($event)"> 

This will catch the input before angular2 catches the event.

vote vote

82

After did lot of research finally I create a function which full fill the requirement. The function which I created restrict all special character and allow only alphabets and number.. and that function works fine for both either you did copy paste and typing both. Hope it works :)

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

How you use -
1) Add above method in your class component of ts file.
2) Call method inputValidator($event) on input event..

vote vote

70

The inputmask plugin does the best job of this. Its extremely flexible in that you can supply whatever regex you like to restrict input. It also does not require JQuery.

Step 1: Install the plugin:

npm install --save inputmask 

Step2: create a directive to wrap the input mask:

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);   }  } 

Step 3:

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

Check out their github docs for more information.

vote vote

70

Tested Answer By me:

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);  } 
vote vote

54

You can use the HTML5 input of type number

It does not accept any characters in its declaration

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

Here is an example of its usage with angular 2 [(model)]

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

Top 3 video Explaining angular - Proper way to restrict text input values (e.g. only numbers)

Related QUESTION?