Only Allow Digits In Input Box Angular directive – ngx-digit-only

An Angular directive only allows [0-9] in the input box when typing, pasting or drag/dropping. This directive handles both Windows keyboard and Mac keyboard.
Allow-Digits-Input-Box-Angular-directive

Installation

Install plugin via NPM

npm i -S @uiowa/digit-only

JS

Import the plugin in your angular module.

import { DigitOnlyModule } from '@uiowa/digit-only';
 
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    DigitOnlyModule
  ],
  ...
})
export class YourModule { }


HTML

Add the plugin to your html input box.

<input type="text" digitOnly>

Pull out the numeric keypad in mobile devices and tablets

<input type="text" name="zipcode" id="zipcode"
    placeholder="00000" maxlength="5"
    inputmode="numeric" pattern="[0-9]*" digitOnly>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by changhuixu. Visit their official github repository for more information and follow for future updates.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.