Min and max value of input in angular4 application

Question

I have an angular4 application with a form  In this one I have an input to enter a percentage  So  I want to block the input with value between 0 and 100  I tried to add min  0  and max  100  but I can yet enter an number higher than 100 or smaller than 0   template   lt md-input-container gt     lt input type  number       maxlength  3       min  0       max  100       required      mdInput      placeholder  Charge         ngModel    rateInput       name  rateInput  gt     lt md-error gt Required field lt  md-error gt   lt  md-input-container gt    Do you know how I can do this

User · Answer

You can control with a change event if the input is within your range  if it is not in the range you assign 0   lt md-input-container gt     lt input type  quot number quot       maxlength  quot 3 quot       min  quot 0 quot       max  quot 100 quot       required      mdInput      placeholder  quot Charge quot         ngModel    quot rateInput quot       change    quot rateInput  lt  0   rateInput   0   rateInput  rateInput  gt  100   rateInput   0   rateIntput  quot      name  quot rateInput quot  gt     lt md-error gt Required field lt  md-error gt   lt  md-input-container gt

User · Answer

Actually when you use type  number  your input control populate with up down arrow to increment decrement numeric value  so when you update textbox value with those button it will not pass limit of 100  but when you manually give input like 120 130 and so on  it will not validate for max limit  so you have to validate it by code   You can disable manual input OR you have to write some code on valueChange textChange key  event

User · Answer

You can write a directive to listen the change event on the input and reset the value to the min value if it is too low  StackBlitz   HostListener  change   onChange       const min    this elementRef nativeElement getAttribute  min       if  this valueIsLessThanMin min   this elementRef nativeElement value         this renderer2 setProperty        this elementRef nativeElement         value         min                     Also listen for the ngModelChange event to do the same when the form value is set    HostListener  ngModelChange      event    onModelChange value  number      const min    this elementRef nativeElement getAttribute  min      if  this valueIsLessThanMin min  value         const formControl   this formControlName         this formControlName control         this formControlDirective control       if  formControl          if  formControl updateOn      change             console warn             minValueDirective  form control   this formControlName name  is set to update on change           this can cause issues with min update values                            formControl reset min                 Full code   import     Directive    ElementRef    HostListener    Optional    Renderer2    Self   from   angular core   import   FormControlDirective  FormControlName   from   angular forms     Directive        tslint disable-next-line  directive-selector   selector   input minValue  min  type number      export class MinValueDirective      HostListener  change   onChange         const min    this elementRef nativeElement getAttribute  min         if  this valueIsLessThanMin min   this elementRef nativeElement value           this renderer2 setProperty          this elementRef nativeElement           value           min                               if input is a form control validate on model change    HostListener  ngModelChange      event      onModelChange value  number        const min    this elementRef nativeElement getAttribute  min        if  this valueIsLessThanMin min  value           const formControl   this formControlName           this formControlName control           this formControlDirective control         if  formControl            if  formControl updateOn      change               console warn               minValueDirective  form control                  this formControlName name               is set to update on change               this can cause issues with min update values                                  formControl reset min                        constructor      private elementRef  ElementRef lt HTMLInputElement gt       private renderer2  Renderer2       Optional    Self   private formControlName  FormControlName       Optional    Self   private formControlDirective  FormControlDirective           private valueIsLessThanMin min  any  value  number   boolean       return typeof min      number   amp  amp  value  amp  amp  value  lt  min          Make sure to use this with the form control set to updateOn blur or the user won t be able to enter a  1 digit number if the first digit is below the min value    this formGroup   this formBuilder group       test          null                  updateOn   blur           validators   Validators min 5

User · Answer

Simply do this in angular2  by adding  onkeypress    lt input type  number       maxlength  3       min  0       max  100       required      mdInput      placeholder  Charge         ngModel    rateInput       onkeypress   return  event charCode    8    event charCode    0    null   event charCode  gt   48  amp  amp  event charCode  lt   57      name  rateInput  gt    Tested on Angular 7

User · Answer

If you are looking to validate length use minLength and maxLength instead

User · Answer

I succeeded by using a form control  This is my html code    lt md-input-container gt       lt input type  quot number quot  min  quot 0 quot  max  quot 100 quot  required mdInput placeholder  quot Charge quot    ngModel    quot rateInput quot  name  quot rateInput quot   formControl   quot rateControl quot  gt       lt md-error gt Please enter a value between 0 and 100 lt  md-error gt   lt  md-input-container gt   And in my Typescript code  I have   this rateControl   new FormControl  quot  quot    Validators max 100   Validators min 0     So  if we enter a value higher than 100 or smaller than 0  the material design input become red and the field is not validate  So after  if the value is not good  I don t save when I click on the save button

User · Answer

I assume the reader has basic knowledge of Angular2  and Forms  It is easy to show a numerical input and put the limits  but you have to also take care of things may happen out of your predictions   Implement the tag in your  html     lt input type  quot number quot   min   quot 0 00 quot   max   quot 100 00 quot   step   quot 0 01 quot  formControlName  quot rateFC quot  gt    But as Adrien said  still user can enter manually a wrong number  You can validate input by Validators easily  In your   ts    import   FormGroup  FormControl  Validators   from   angular forms      many other things     this myFG   new FormGroup        other form controls        rateFC    new FormControl 0   Validators min 0   Validators max 100          Up to now everything is ok  but it is better to let the user know the input is wrong  then draw a red line around the invalid input element by adding to your style    form-control ng-touched ng-invalid      border 2px solid red      And to make it perfect  prevent the user to submit the wrong data    lt button type  quot submit quot   disabled   quot  myFG valid quot  gt Submit lt  button gt

User · Answer

Most simple approach in Template driven forms for min max validation with out using reactive forms and building any directive  would be to use pattern attribute of html  This has already been explained and answered here please look https   stackoverflow com a 63312336 14069524

User · Answer

Here is the solution    This is kind of hack   but it will work   lt input type  number   placeholder  Charge     ngModel    rateInput   name  rateInput  pattern        0-9   1-9  0-9   1  0  0     required   rateInput2    ngModel  gt    lt div  ngIf  rateInput2 errors  amp  amp   rateInput2 dirty    rateInput2 touched        lt div  hidden    rateInput2 errors pattern  gt          Number should be between 0 and 100      lt  div gt   lt  div gt    Here is the link to the plunker   please have a look

[angular] Min and max value of input in angular4 application

Examples related to angular

Examples related to input

Examples related to max

Examples related to min