Input type number only numeric value validation

Question

How can I validate an input of type  number  to only be valid if the value is numeric or null using only Reactive Forms  no directives   Only numbers  0-9  and   are allowed  no  e  or any other characters     What I ve tried so far   Template    lt form  formGroup   form  novalidate gt       lt input type  number  formControlName  number  id  number  gt   lt  form gt    Component   export class App     form  FormGroup   new FormGroup         constructor      private fb  FormBuilder            this form   fb group         number        CustomValidator numeric                  CustomValidator   export class CustomValidator       Number only validation   static numeric control  AbstractControl        let val   control value       if  val     null    val         return null       if   val toString   match    0-9       0-9         return    invalidNumber   true         return null          Plunker  The problem is when a user enters something that is not a number   123e  or  abc   the FormControl s value becomes null  keep in mind I don t want the field to be required so if the field really is empty null value should be valid      Cross browser support is also important  Chrome s number input fields do not allow the user to input letters - except  e   but FireFox and Safari do

User · Answer

I had a similar problem  too  I wanted numbers and null on an input field that is not required  Worked through a number of different variations  I finally settled on this one  which seems to do the trick  You place a Directive  ntvFormValidity  on any form control that has native invalidity and that doesn t swizzle that invalid state into ng-invalid   Sample use   lt input type  number  formControlName  num  placeholder  0  ntvFormValidity gt   Directive definition   import   Directive  Host  Self  ElementRef  AfterViewInit   from   angular core   import   FormControlName  FormControl  Validators   from   angular forms     Directive     selector    ntvFormValidity      export class NtvFormControlValidityDirective implements AfterViewInit      constructor  Host   private cn  FormControlName   Host   private el  ElementRef               - Angular doesn t fire  change  events for invalid  lt input type  number  gt    - We have to check the DOM object for browser native invalid state   - Add custom validator that checks native invalidity        ngAfterViewInit         var control  FormControl   this cn control          Bridge native invalid to ng-invalid via Validators     const ntvValidator        gt   this el nativeElement validity valid     error   invalid      null      const v fn   control validator       control setValidators v fn   Validators compose  v fn  ntvValidator     ntvValidator       setTimeout     gt control updateValueAndValidity    0           The challenge was to get the ElementRef from the FormControl so that I could examine it  I know there s  ViewChild  but I didn t want to have to annotate each numeric input field with an ID and pass it to something else  So  I built a Directive which can ask for the ElementRef   On Safari  for the HTML example above  Angular marks the form control invalid on inputs like  abc    I think if I were to do this over  I d probably build my own CVA for numeric input fields as that would provide even more control and make for a simple html   Something like this    lt my-input-number formControlName  num  placeholder  0  gt   PS  If there s a better way to grab the FormControl for the directive  I m guessing with Dependency Injection and providers on the declaration  please let me know so I can update my Directive  and this answer

User · Answer

Sometimes it is just easier to try something simple like this   validateNumber control  FormControl      s  string   boolean          revised to reflect null as an acceptable value    if  control value     null  return null        check to see if the control value is no a number   if  isNaN control value         return    NaN   true           return null       Hope this helps   updated as per comment   You need to to call the validator like this   number  new FormControl     this validateNumber bind this      The bind this  is necessary if you are putting the validator in the component which is how I do it

User · Answer

The easiest way would be to use a library like this one and specifically you want noStrings to be true      export class CustomValidator       Number only validation          static numeric control  AbstractControl            let val   control value           const hasError   validate  val  val    val   numericality   noStrings  true               if  hasError  return null           return val

User · Answer

You need to use regular expressions in your custom validator  For example  here s the code that allows only 9 digits in the input fields   function ssnValidator control  FormControl     key  string   any      const value  string   control value          const valid   value match    d 9        return valid   null    ssn  true       Take a look at a sample app here   https   github com Farata angular2typescript tree master Angular4 form-samples src app reactive-validator

User · Answer

In HTML file you can add ngIf for you pattern like this   lt div class  form-control-feedback   ngIf  Mobile errors  amp  amp   Mobile dirty    Mobile touched   gt           lt p  ngIf  Mobile errors pattern  class  text-danger  gt Number Only lt  p gt         lt  div gt    In  ts file you can add the Validators pattern -    0-9      this Mobile   new FormControl         Validators required    Validators pattern    0-9         Validators minLength 8

User · Answer

Using directive it becomes easy and can be used throughout the application HTML  lt input type  quot text quot  placeholder  quot Enter value quot  numbersOnly gt   As  keyCode   and  which   are deprecated  codes are checked using  key   Referred from Directive   Directive      selector   quot  numbersOnly  quot      export class NumbersOnlyDirective      Input   numbersOnly boolean     navigationKeys  Array lt string gt      Backspace      Add keys as per requirement      constructor private  el  ElementRef          HostListener  keydown      event    onKeyDown e  KeyboardEvent             if            Allow  Delete  Backspace  Tab  Escape  Enter  etc       this navigationKeys indexOf e key   gt  -1            e key      a   amp  amp  e ctrlKey     true        Allow  Ctrl A        e key      c   amp  amp  e ctrlKey     true        Allow  Ctrl C        e key      v   amp  amp  e ctrlKey     true        Allow  Ctrl V        e key      x   amp  amp  e ctrlKey     true        Allow  Ctrl X        e key      a   amp  amp  e metaKey     true        Cmd A  Mac         e key      c   amp  amp  e metaKey     true        Cmd C  Mac         e key      v   amp  amp  e metaKey     true        Cmd V  Mac         e key      x   amp  amp  e metaKey     true     Cmd X  Mac                  return      let it happen  don t do anything              Ensure that it is a number and stop the keypress     if  e key            isNaN Number e key            e preventDefault

[forms] Input type number "only numeric value" validation

Examples related to forms

Examples related to angular

Examples related to validation