Angular2 - Input Field To Accept Only Numbers

Question

In Angular 2  how can I mask an input field  textbox  such that it accepts only numbers and not alphabetical characters   I have the following HTML input    lt input    type  text      ngSwitchDefault    class  form-control      change   onInputChange         ngModel    config Value      focus   handleFocus  event       blur   handleBlur  event     gt    The above input is a generic text input which may either be used as a simple text field or as a numeric field  for example  to show the year   Using Angular 2  how can I use the same input control and apply some sort of filter mask on this field  such that it accepts only numbers   What are the different ways I can achieve this   Note  I need to achieve this using only textbox and not using input number type

User · Answer

I would like to build on the answer given by @omeralper , which in my opinion provided a good foundation for a solid solution.

What I am proposing is a simplified and up to date version with the latest web standards. It is important to note that event.keycode is removed from the web standards, and future browser updates might not support it anymore. See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Furthermore, the method

String.fromCharCode(e.keyCode);

does not guarantee that the keyCode pertaining to the key being pressed by the user maps to the expected letter as identified on the user's keyboard, since different keyboard configurations will result in a particular keycode different characters. Using this will introduce bugs which are difficult to identify, and can easily break the functionality for certain users. Rather I'm proposing the use of event.key, see docs here https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Furthermore, we only want that the resultant output is a valid decimal. This means that the numbers 1, 11.2, 5000.2341234 should be accepted, but the value 1.1.2 should not be accepted.

Note that in my solution i'm excluding cut, copy and paste functionality since it open windows for bugs, especially when people paste unwanted text in associated fields. That would required a cleanup process on a keyup handler; which isn't the scope of this thread.

Here is the solution i'm proposing.

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

@Directive({
    selector: '[myNumberOnly]'
})
export class NumberOnlyDirective {
    // Allow decimal numbers. The \. is only allowed once to occur
    private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];

    constructor(private el: ElementRef) {
    }

    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent) {
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

User · Answer

Use pattern attribute for input like below    lt input type  text  pattern   0-9     gt

User · Answer

HTML   lt input type  quot text quot  maxlength  quot 5 quot  focusout   quot onTextboxFocusOutDecimalPercentageValidate  event  quot    input   quot onTextboxChangeDecimalPercentageValidate  event  quot  gt   TS  onTextboxChangeDecimalPercentageValidate event  Event         var inputData     lt HTMLInputElement gt event target  value         replace more than one dot      var extractedFte   inputData replace    0-9   g      replace       x                           replace     g      replace  x                Extract Decimal Values      extractedFte   extractedFte replace     d    d 0 2   d      quot  1 quot           Reasign to same control        lt HTMLInputElement gt event target  value   extractedFte       if  extractedFte        amp  amp  Number extractedFte   gt   100             lt HTMLInputElement gt event target  value    100   extractedFte    100                  if  Number extractedFte     0                lt HTMLInputElement gt event target  value       extractedFte                         onTextboxFocusOutDecimalPercentageValidate event  Event         var inputData     lt HTMLInputElement gt event target  value         replace more than one dot      var extractedFte   inputData replace    0-9   g      replace       x                           replace     g      replace  x                Extract Decimal Values      extractedFte   extractedFte replace     d    d 0 2   d      quot  1 quot           Reasign to same control        lt HTMLInputElement gt event target  value   extractedFte       if  extractedFte        amp  amp  Number extractedFte   gt   100             lt HTMLInputElement gt event target  value    100   extractedFte    100               if  Number extractedFte     0             lt HTMLInputElement gt event target  value       extractedFte

User · Answer

I saw a lot of comments about handling copy pasting   To piggy back off of  omeralper answer  you can add a paste event handler to the onlyNumber directive to handle copy pasting      HostListener  paste      event    onPaste event         Don t allow pasted text that contains non-numerics   var pastedText    event originalEvent    event  clipboardData getData  text plain       if  pastedText        var regEx   new RegExp    0-9           if   regEx test pastedText           event preventDefault              This will only allow content to be copy and pasted into the textbox ONLY if it is a number   That s the simplest solution   Changing the content of the clipboard to remove non-numerics is a lot more complicated and might not be worth it   To get pasted text from IE you can use the following   window clipboardData getData  Text

User · Answer

I know this is an old question  but since this is a common funcionality  I want to share the modifications I ve made    Custom decimal separator  point or comma  Support for integers only or integer and decimals Support for positive numbers only or positives and negatives Validate minus sign -  is in the beginning Support to mouse pasting  with some limitation though https   caniuse com  feat clipboard  Support for Mac command key Replace strings like   33  and  33   for the correct versions  0 33 and 33 0  import   Directive  ElementRef  HostListener  Input   from   angular core     Directive   selector    NumbersOnly      export class NumbersOnly          Input   allowDecimals  boolean   true       Input   allowSign  boolean   false       Input   decimalSeparator  string             previousValue  string               --------------------------------------         Regular expressions     integerUnsigned  string      0-9          integerSigned  string     -  0-9          decimalUnsigned  string      0-9     0-9            decimalSigned  string     -  0-9     0-9                        Class constructor         param hostElement             constructor private hostElement  ElementRef                      Event handler for host s change event         param e              HostListener  change      event    onChange e                 this validateValue this hostElement nativeElement value             Event handler for host s paste event     param e      HostListener  paste      event    onPaste e            get and validate data from clipboard     let value   e clipboardData getData  text plain        this validateValue value       e preventDefault              Event handler for host s keydown event     param event      HostListener  keydown      event    onKeyDown e  KeyboardEvent         let cursorPosition  number   e target  selectionStart        let originalValue  string   e target  value        let key  string   this getName e       let controlOrCommand    e ctrlKey     true    e metaKey     true       let signExists   originalValue includes  -        let separatorExists   originalValue includes this decimalSeparator           allowed keys apart from numeric characters     let allowedKeys              Backspace    ArrowLeft    ArrowRight    Escape    Tab                 when decimals are allowed  add        decimal separator to allowed codes when        its position is not close to the the sign  -  and  -      let separatorIsCloseToSign    signExists  amp  amp  cursorPosition  lt   1       if  this allowDecimals  amp  amp   separatorIsCloseToSign  amp  amp   separatorExists             if  this decimalSeparator                     allowedKeys push               else             allowedKeys push                     when minus sign is allowed  add its        key to allowed key only when the        cursor is in the first position  and        first character is different from        decimal separator     let firstCharacterIsSeparator    originalValue charAt 0     this decimalSeparator       if  this allowSign  amp  amp   signExists  amp  amp          firstCharacterIsSeparator  amp  amp  cursorPosition    0             allowedKeys push  -                  allow some non-numeric characters     if  allowedKeys indexOf key     -1               Allow  Ctrl A and Command A          key     a   amp  amp  controlOrCommand                Allow  Ctrl C and Command C          key     c   amp  amp  controlOrCommand                Allow  Ctrl V and Command V          key     v   amp  amp  controlOrCommand                Allow  Ctrl X and Command X          key     x   amp  amp  controlOrCommand                let it happen  don t do anything         return                save value before keydown event     this previousValue   originalValue          allow number characters only     let isNumber    new RegExp this integerUnsigned   test key       if  isNumber  return  else e preventDefault              Test whether value is a valid number or not     param value     validateValue value  string   void           choose the appropiate regular expression     let regex  string      if   this allowDecimals  amp  amp   this allowSign  regex   this integerUnsigned      if   this allowDecimals  amp  amp  this allowSign  regex   this integerSigned      if  this allowDecimals  amp  amp   this allowSign  regex   this decimalUnsigned      if  this allowDecimals  amp  amp   this allowSign  regex   this decimalSigned          when a numbers begins with a decimal separator         fix it adding a zero in the beginning     let firstCharacter   value charAt 0       if  firstCharacter    this decimalSeparator          value   0   value          when a numbers ends with a decimal separator         fix it adding a zero in the end     let lastCharacter   value charAt value length-1       if  lastCharacter    this decimalSeparator          value   value   0          test number with regular expression  when        number is invalid  replace it with a zero     let valid  boolean    new RegExp regex   test value       this hostElement nativeElement  value     valid   value   0            Get key s name     param e     getName e   string        if  e key             return e key         else               for old browsers         if  e keyCode  amp  amp  String fromCharCode                 switch  e keyCode                    case   8  return  Backspace                   case   9  return  Tab                   case  27  return  Escape                   case  37  return  ArrowLeft                   case  39  return  ArrowRight                   case 188  return                      case 190  return                      case 109  return  -      minus in numbpad                 case 173  return  -      minus in alphabet keyboard in firefox                 case 189  return  -      minus in alphabet keyboard in chrome                 default  return String fromCharCode e keyCode                                      Usage     lt input NumbersOnly          allowDecimals   true           allowSign   true          type  text  gt

User · Answer

With support for sanitizing pasted content   import   Directive  ElementRef  HostListener  Input   from   angular core     Directive     selector    NumbersOnly      export class NumbersOnlyDirective        DIGITS REGEXP    new RegExp   D g       constructor private el  ElementRef                 Sanatize clipboard by removing any non-numeric input after pasting         this el nativeElement onpaste    e any    gt                e preventDefault                let text              let clp    e originalEvent    e  clipboardData              if  clp     undefined    clp     null                    text     lt any gt window  clipboardData getData  text                          if  text                               text   text replace this DIGITS REGEXP                           if  window getSelection                            let newNode   document createElement  span                            newNode innerHTML   text                          window getSelection   getRangeAt 0  insertNode newNode                         else                             lt any gt window  selection createRange   pasteHTML text                                                         else                   text   clp getData  text plain                          if  text                               text   text replace this DIGITS REGEXP                           document execCommand  insertText   false  text                                                        HostListener  keydown      event    onKeyDown event        let e    lt KeyboardEvent gt  event      if   46  8  9  27  13  110  190  indexOf e keyCode      -1             Allow  Ctrl A        e keyCode     65  amp  amp   e ctrlKey    e metaKey               Allow  Ctrl C        e keyCode     67  amp  amp   e ctrlKey    e metaKey               Allow  Ctrl V        e keyCode     86  amp  amp   e ctrlKey    e metaKey               Allow  Ctrl X        e keyCode     88  amp  amp   e ctrlKey    e metaKey               Allow  home  end  left  right        e keyCode  gt   35  amp  amp  e keyCode  lt   39                let it happen  don t do anything         return                   Ensure that it is a number and stop the keypress       if   e shiftKey     e keyCode  lt  48    e keyCode  gt  57    amp  amp   e keyCode  lt  96    e keyCode  gt  105               e preventDefault

User · Answer

you can achive it like this   lt input type  text  pInputText  keypress   onlyNumberKey  event   maxlength  3  gt    onlyNumberKey event        return  event charCode    8    event charCode    0    null   event charCode  gt   48  amp  amp  event charCode  lt   57       for Decimal you can use this as  onlyDecimalNumberKey event        let charCode    event which    event which   event keyCode      if  charCode    46  amp  amp  charCode  gt  31          amp  amp   charCode  lt  48    charCode  gt  57           return false      return true      hope this will help you

User · Answer

Would not be simple enough just to write  onlyNumbers event    if isNaN event target value   1      console log  Not a number     else     console log  Number

User · Answer

I have made some modifications in the above directive and implemented min  max  maxlength                    import   Directive  ElementRef  HostListener  Input   from   angular core     Directive     selector    numberOnly      export class NumbersOnlyDirective      private regex  RegExp   new RegExp   0-9  g        Allow key codes for special events  Reflect     private specialKeys  Array lt number gt     46  8  9  27  13  110  190  35  36  37  39        Backspace  tab  end  home     Input   maxlength  number     Input   min  number     Input   max  number     constructor private el  ElementRef             HostListener  keydown      event        onKeyDown event  KeyboardEvent        e    lt KeyboardEvent gt event   if       this specialKeys indexOf event which   gt  -1          to allow backspace  enter  escape  arrows      e which    65  amp  amp  e ctrlKey    true          Allow  Ctrl C            e which    67  amp  amp  e ctrlKey    true          Allow  Ctrl X    e which    88  amp  amp  e ctrlKey    true        return    else if     to allow numbers      e which  gt   48  amp  amp  e which  lt   57          to allow numpad number      event which  gt   96  amp  amp  event which  lt   105       else         event preventDefault              let current  string   this el nativeElement value       let next  string   current concat event key       if   next  amp  amp   String next  match this regex             this maxlength  amp  amp  next length  gt  this maxlength            this min  amp  amp   next  lt  this min            this max  amp  amp   next  gt   this max           event preventDefault

User · Answer

Just use HTML5  input type    number

User · Answer

Pattern for the Valid Mobile number pattern       91-   0   0-9  10      Pattern for accept only number from text box pattern   0-9      patter for accept only number with specific number e g  Pincode  pattern    0-9  5

User · Answer

You could use regex    lt input type  text   keypress   numericOnly  event   gt   numericOnly event   boolean           let patt       0-9          let result   patt test event key       return result

User · Answer

Use directive to restrict the user to enter only numbers in the following way    directive  onlyNumber   function          var regExp      0-9          return           require    ngModel           restrict   A           priority  1          link  function  scope  elm  attrs  ctrl                ctrl  validators onlyNumber  function  modalValue                    return ctrl  isEmpty modalValue     regExp test modalValue                                            In HTML    lt input id  txtRollNumber  type  text  name  rollNumber  placeholder  Enter roll number   ng-model  rollNumber  class  form-control  maxlength  100  required only-number   gt    Angular2       import   Directive  ElementRef  HostListener  Input   from   angular core     Directive     selector    OnlyNumber      export class OnlyNumber      constructor private el  ElementRef          Input   OnlyNumber  boolean      HostListener  keydown      event    onKeyDown event        let e    lt KeyboardEvent gt  event      if  this OnlyNumber          if   46  8  9  27  13  110  190  indexOf e keyCode      -1               Allow  Ctrl A          e keyCode     65  amp  amp   e ctrlKey    e metaKey                 Allow  Ctrl C          e keyCode     67  amp  amp   e ctrlKey    e metaKey                 Allow  Ctrl V          e keyCode     86  amp  amp   e ctrlKey    e metaKey                 Allow  Ctrl X          e keyCode     88  amp  amp   e ctrlKey    e metaKey                 Allow  home  end  left  right          e keyCode  gt   35  amp  amp  e keyCode  lt   39                  let it happen  don t do anything           return                       Ensure that it is a number and stop the keypress         if   e shiftKey     e keyCode  lt  48    e keyCode  gt  57    amp  amp   e keyCode  lt  96    e keyCode  gt  105                 e preventDefault                              And need to write the directive name in your input as an attribute    lt input OnlyNumber  true    gt

User · Answer

A modern approach for the best answer  without deprecated e keyCode     HostListener  keydown      event    onKeyDown event        let e    lt KeyboardEvent gt  event      if    Delete    Backspace    Tab    Escape    Enter    NumLock    ArrowLeft    ArrowRight    End    Home        indexOf e key      -1             Allow  Ctrl A        e key      a   amp  amp   e ctrlKey    e metaKey               Allow  Ctrl C        e key      c   amp  amp   e ctrlKey    e metaKey               Allow  Ctrl V        e key      v   amp  amp   e ctrlKey    e metaKey               Allow  Ctrl X        e key      x   amp  amp   e ctrlKey    e metaKey               let it happen  don t do anything       return               Ensure that it is a number and stop the keypress     if   e shiftKey      0    1    2    3    4    5    6    7    8    9   indexOf e key      -1           e preventDefault

User · Answer

You can use angular2 directives  Plunkr   import   Directive  ElementRef  HostListener  Input   from   angular core     Directive     selector    OnlyNumber      export class OnlyNumber      constructor private el  ElementRef          Input   OnlyNumber  boolean      HostListener  keydown      event    onKeyDown event        let e    lt KeyboardEvent gt  event      if  this OnlyNumber          if   46  8  9  27  13  110  190  indexOf e keyCode      -1               Allow  Ctrl A          e keyCode     65  amp  amp   e ctrlKey    e metaKey                 Allow  Ctrl C          e keyCode     67  amp  amp   e ctrlKey    e metaKey                 Allow  Ctrl V          e keyCode     86  amp  amp   e ctrlKey    e metaKey                 Allow  Ctrl X          e keyCode     88  amp  amp   e ctrlKey    e metaKey                 Allow  home  end  left  right          e keyCode  gt   35  amp  amp  e keyCode  lt   39                  let it happen  don t do anything           return                       Ensure that it is a number and stop the keypress         if   e shiftKey     e keyCode  lt  48    e keyCode  gt  57    amp  amp   e keyCode  lt  96    e keyCode  gt  105                 e preventDefault                              and you need to write the directive name in your input as an attribute   lt input OnlyNumber  true    gt    don t forget to write your directive in declarations array of your module    By using regex you would still need functional keys  export class OnlyNumber      regexStr      0-9        constructor private el  ElementRef          Input   OnlyNumber  boolean      HostListener  keydown      event    onKeyDown event        let e    lt KeyboardEvent gt  event      if  this OnlyNumber            if   46  8  9  27  13  110  190  indexOf e keyCode      -1               Allow  Ctrl A          e keyCode    65  amp  amp  e ctrlKey     true                Allow  Ctrl C          e keyCode    67  amp  amp  e ctrlKey     true                Allow  Ctrl V          e keyCode    86  amp  amp  e ctrlKey     true                Allow  Ctrl X          e keyCode    88  amp  amp  e ctrlKey     true                Allow  home  end  left  right          e keyCode  gt   35  amp  amp  e keyCode  lt   39                  let it happen  don t do anything           return                  let ch   String fromCharCode e keyCode         let regEx    new RegExp this regexStr             if regEx test ch           return        else          e preventDefault

User · Answer

If you use primeng and Angular 6 or above there is the p-inputMask component  It prevents alpha typing AND negative values  https   www primefaces org primeng   inputmask

User · Answer

A more concise solution  Try this directive   Can also be used if you re using ReactiveForms   export class NumberOnlyDirective     private el  NgControl     constructor private ngControl  NgControl        this el   ngControl            Listen for the input event to also handle copy and paste     HostListener  input      event target value      onInput value  string           Use NgControl patchValue to prevent the issue on validation     this el control patchValue value replace    0-9  g                The use it on your inputs like this    lt input matInput formControlName  aNumberField  numberOnly gt

User · Answer

Below is my angular code that allows the only number to enter and only paste number  not text    lt input id  pId  maxlength  8  minlength  8  type  text    ngModel    no  formControlName  prefmeno  name  no  class  form-control  gt    And in ts file added in ngOnIt   ngOnInit       setTimeout      gt      jQuery   pId   on  paste keyup   function e       jQuery this  val document getElementById  pId   value replace     d  g                 2000       I used setTimeout for waiting time to load DOM  And used jquery with javascript to perform this task   Paste  and  keyup  are used to trigger paste and enter in the field

User · Answer

You could also create a directive which implements the ControlValueAccessor Interface  https   angular io api forms ControlValueAccessor    See working example here  https   stackblitz com edit angular-input-field-to-accept-only-numbers  You can listen to the  input  event and there is no need to check for keycodes  It supports copy  amp  paste and integrates nicely with the Angular Forms API due to the ControlValueAccessor Interface   Directive    Directive               selector    onlyNumber      export class OnlyNumberDirective implements ControlValueAccessor   private onChange   val  string    gt  void      private value  string   constructor      private elementRef  ElementRef      private renderer  Renderer2              HostListener  input      event target value    onInputChange value  string        const filteredValue  string   filterValue value       this updateTextInput filteredValue  this value     filteredValue      private updateTextInput value  propagateChange        this renderer setProperty this elementRef nativeElement   value   value       if  propagateChange            this onChange value             this value   value        ControlValueAccessor Interface      registerOnChange fn  any   void       this onChange   fn     writeValue value  string   void       value   value   String value            this updateTextInput value  false         function filterValue value   string       return value replace    0-9   g           Usage    lt input name  number  type  text  onlyNumber   ngModel    someNumber  gt

User · Answer

fromCharCode returns  a  when pressing on the numpad  1  so this methoid should be avoided   admin  could not comment as usual

User · Answer

lt input type  number  min  0  oninput  this value   Math abs this value   gt

User · Answer

You can do this easily using a mask   lt input type  text  mask  quot 99 quot  formControlName  quot percentage quot  placeholder  quot 0 quot  gt   99 - optional 2 digits Don t forget to import NgxMaskModule in your module  imports        NgxMaskModule forRoot

User · Answer

lt input oninput  quot this value this value replace    0-9  g     quot   or  2   in The HTML File     lt input   ngModel    quot data quot   keypress   quot stripText  event  quot       class  quot form-control quot  gt   in The ts File  stripText event    const seperator        0-9     const maskSeperator    new RegExp seperator    g      let result  maskSeperator test event key     return result       This 2 solution works

User · Answer

If you don t want a directive  https   stackblitz com edit numeric-only  in component html   lt input  keypress   numberOnly  event   type  text  gt    in component ts  export class AppComponent      numberOnly event   boolean       const charCode    event which    event which   event keyCode      if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false            return true

User · Answer

import  Directive  ElementRef  HostListener  Output  EventEmitter  from   angular core           only-digits      Directive         selector    only-digits              export class OnlyDigits          constructor public el  ElementRef             this el nativeElement onkeypress    evt    gt              if  evt which  lt  48    evt which  gt  57                evt preventDefault                                            Directive is also a best way to do it

User · Answer

Casting because it works also with leading 0 like 00345   Directive     selector    appOnlyDigits      export class AppOnlyDigitsDirective      HostListener  input      event      onKeyDown ev  KeyboardEvent        const input   ev target as HTMLInputElement      input value   String input value replace   D  g

User · Answer

You need to use type  number  instead text  You can also specify max and min numbers   lt input type  number  name  quantity  min  1  max  5  gt

User · Answer

lt input type  text   keypress   keyPress  event   gt      keyPress event  any        const pattern     0-9   -           let inputChar   String fromCharCode event charCode       if  event keyCode    8  amp  amp   pattern test inputChar           event preventDefault

User · Answer

Just Create a directive and add below hostlistener    HostListener  input      event        onInput event  Event            this elementRef nativeElement value     lt HTMLInputElement gt event currentTarget  value replace    0-9  g               Replace invalid text with empty  All keys and key combinations will now work across all browsers till IE9

User · Answer

Here is easy one  Simple directive On keydown event it checks the length of a key is one and key is not a number to preventDefault   and it won t renders that char    import  Directive  ElementRef  HostListener  from   angular core     Directive       selector    numbersOnly      export class NumbersOnlyDirective        HostListener  keydown      event        keyDownEvent event  KeyboardEvent            if  event key length     1  amp  amp   event which  lt  48    event which  gt  57                 event preventDefault                         HTML     lt input type  text    ngModel    numModel  numbersOnly   gt    Limitations  It will allow pasting using a mouse that way will accept other char  To avoid that you can pass the model as input to the directive and ngOnChage to that model change value to only numbers   Like below   EDIT  Added Code to detect change in Model and update the input s value  import  Directive  ElementRef  HostListener  Input  OnChanges  from   angular core     Directive       selector    numbersOnly      export class NumbersOnlyDirective implements OnChanges         Input   numbersOnly  any       constructor private el  ElementRef           HostListener  keydown      event        keyDownEvent event  KeyboardEvent               Add other conditions if need to allow ctr c    ctr v         if  event key length     1  amp  amp   event which  lt  48    event which  gt  57                 event preventDefault                         ngOnChanges changes            if  changes numbersOnly                this el nativeElement value   this el nativeElement value replace    0-9  g                            HTML     lt input type  text    ngModel    numModel   numbersOnly   numModel    gt

User · Answer

I know this is has a lot of answers  but I needed to handle the following  which none of the answers seemed to fully support     Support of textarea with option to for multi-lines Decimals or negative numbers Max length per line Cross-browser support  Chrome  Edge  IE 11  Handling cut paste operations and events   The solution allows me to define a textarea like this    lt textarea class  form-control    ngModel    this myModelVariable      appOnlyNumbers  allowNegative   true   allowMultiLine   true        allowDecimal   true   maxLength   10      placeholder  Enter values  one per line   gt  lt  textarea gt    Or if I just want positive integers   lt textarea class  form-control    ngModel    this myModelVariable      appOnlyNumbers  allowMultiLine   true   maxLength   9      placeholder  Enter values  one per line   gt  lt  textarea gt    Here is my directive   import   Directive  HostListener  Input  ElementRef   from   angular core     Directive     selector    appOnlyNumbers      export class OnlyNumbersDirective     constructor private el  ElementRef          Input   allowMultiLine  boolean   false     Input   allowNegative  boolean   false     Input   allowDecimal  boolean   false     Input   maxLength  number   0    regex  RegExp      HostListener  keypress      event      onKeyPress event  KeyboardEvent        this validate event  event key      Enter      n    event key           HostListener  paste      event      onPaste event  Event        const pastedText     lt any gt window  clipboardData  amp  amp    lt any gt window  clipboardData getData  Text      If IE  use window           lt ClipboardEvent gt event  amp  amp    lt ClipboardEvent gt event  clipboardData getData  text plain       Non-IE browsers     this validate event  pastedText           HostListener  cut      event      onCut event  Event        this validate event              validate event  Event  text  string        const txtInput   this el nativeElement      const newValue    txtInput value substring 0  txtInput selectionStart          text   txtInput value substring txtInput selectionEnd        if   this regex          this regex    lt RegExp gt eval                 this allowNegative    -                    this allowDecimal        d                d        d                 g              var lines   this allowMultiLine   newValue split   n      newValue       for  let line of lines          let lineText   line replace   r              if  this maxLength  amp  amp  lineText length  gt  this maxLength     lineText match this regex             event preventDefault            return

User · Answer

from  omeralper  s answer   I change a little bit that won t accept period ascii  keycode 110 190   and use let ch    e key   to compare with regular expression when you change language  such as Thai or Japanese language  it won t accept character of those language  export class OnlyNumber      regexStr      0-9        constructor private el  ElementRef          Input   OnlyNumber  boolean      HostListener  keydown      event    onKeyDown event        let e    lt KeyboardEvent gt  event      if  this OnlyNumber             console log event  this OnlyNumber           if   46  8  9  27  13  indexOf e keyCode      -1              return                  let ch    e key         let regEx    new RegExp this regexStr            if regEx test ch           return        else          e preventDefault                  hope this help

User · Answer

Well Thanks to JeanPaul A  and rdanielmurphy  I had made my own Custom directive for limiting input field to number only  Also added the max and min input attributes  Will work in angular 7 also   Angular      import   Directive  ElementRef  Input  HostListener   from   angular core     Directive     selector    appNumberOnly      export class NumberOnlyDirective        Allow decimal numbers  The    is only allowed once to occur   private regex  RegExp   new RegExp    0-9      0-9    0 1   g         Allow key codes for special events  Reflect        Backspace  tab  end  home   private specialKeys  Array lt string gt      Backspace    Tab    End    Home      constructor private el  ElementRef          Input   maxlength  number     Input   min  number     Input   max  number      HostListener  keydown      event      onKeyDown event  KeyboardEvent           Allow Backspace  tab  end  and home keys     if  this specialKeys indexOf event key      -1          return                Do not use event keycode this is deprecated         See  https   developer mozilla org en-US docs Web API KeyboardEvent keyCode     const current  string   this el nativeElement value          We need this because the current value on the DOM element        is not yet updated with the value from this event     const next  string   current concat event key       if  next  amp  amp   String next  match this regex      this maxlength  amp  amp  next length  gt  this maxlength            this min  amp  amp   next  lt  this min            this max  amp  amp   next  gt   this max           event preventDefault                  HostListener  paste      event    onPaste event           Don t allow pasted text that contains non-numerics     const pastedText    event originalEvent    event  clipboardData getData  text plain         if  pastedText          const regEx   new RegExp    0-9             if   regEx test pastedText      this maxlength  amp  amp  pastedText length  gt  this maxlength              this min  amp  amp   pastedText  lt  this min              this max  amp  amp   pastedText  gt   this max             event preventDefault                           HTML   lt input type  text  class  text-area    ngModel    itemName  maxlength  3  appNumberOnly   gt

User · Answer

In order to accomplish this  I bound a function to the onInput method like this    input   stripText infoForm get  uin     Here is the example inside my form    lt form  formGroup   infoForm   submit   next    class  ui form  gt       lt input type  text  formControlName  uin  name  uin  id  uin   input   stripText infoForm get  uin     required  gt   lt  form gt    Then I added the following function to my component     stripText control  FormControl       control setValue control value replace    0-9  g              This regex    0-9  g searches for anything that is not a number and using  replace I set it to be replaced by nothing  So when a user tries to type in a character that is not a number  in this case a character that is not zero through nine   it appears as if nothing happens in the text box

User · Answer

Arbitrary RegExp directive  Here is small directive which use arbitrary regexp and block user to type invalid value   x000D   x000D  import  Directive  HostListener  Input  from   angular core   x000D   x000D   Directive  selector    allowedRegExp     x000D  export class AllowedRegExpDirective   x000D       x000D     Input   allowedRegExp  string  x000D     x000D     HostListener  keydown      event    onKeyDown event  any    x000D         case  selected text  by mouse  - replace it x000D      let s  event target selectionStart  x000D      let e  event target selectionEnd  x000D      let k  event target value   event key  x000D           x000D      if s  e    x000D        k  event target value x000D        k  k slice 0 s    event key   k slice e k length   x000D        x000D   x000D         case  special characters  ignore  x000D      if   ArrowLeft   ArrowRight   ArrowUp   ArroDown   Backspace   Tab   Alt  x000D          Shift   Control   Enter   Delete   Meta   includes event key   return  x000D   x000D         case  normal situation - chceck regexp x000D      let re   new RegExp this allowedRegExp   x000D           x000D      if  re test k   event preventDefault    x000D      x000D    x000D   x000D   x000D    To mask only numbers use   lt input  allowedRegExp      0-9      type  text       gt

User · Answer

Just use type number on your text like below     lt input type  number  class  form-control  matInput name  value  placeholder  xxx   change   xxx    formControlName  value  gt

User · Answer

You can create this Validator and import it in your component  Basically validates the form input string      check there is no dot converts string to number check is an integer check is greater than zero   To implement it in your project      suggested path in your app folder  src app validators number validator ts import in your component  import   NumberValidator   from        validators number validator   add it to the form control inputNumber        NumberValidator isInteger    if you dont want to show the invalid char  bind a  change   deleteCharIfInvalid    to the input  if form get  inputNumber   hasError  isInteger   is  true  delete the last char inserted       FILE  src app validators number validator ts  import   FormControl   from   angular forms    export interface ValidationResult        key  string   boolean     export class NumberValidator        public static isInteger control  FormControl   ValidationResult              check if string has a dot         let hasDot boolean   control value indexOf       gt   0   true   false             convert string to number         let number number   Math floor control value              get result of isInteger           let integer boolean   Number isInteger number              validate conditions          let valid boolean    hasDot  amp  amp  integer  amp  amp  number gt 0          console log  isInteger  gt  valid   hasDot  number  valid           if   valid                return   isInteger  true                      return null

[html] Angular2 - Input Field To Accept Only Numbers

Examples related to html

Examples related to angular

Examples related to input

Examples related to angularjs-directive