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

<md-input-container>
  <input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput" 
    name="rateInput">
  <md-error>Required field</md-error>
</md-input-container>

Do you know how I can do this ?

Yes , it will you need to check for the error , it will not stop user to enter more then that , it will throw error on large number — Vivek Doshi, Aug 03 '17 at 09:23
If I get the error, how can I display an error like with md-error ? — Adrien, Aug 03 '17 at 09:24
That should not be marked duplicate, the answer on the post you provided is outdated. Angular 4 now supports min/max validators. — Lysandros Nikolaou, Aug 03 '17 at 09:30

score 78 · Accepted Answer · edited Feb 18 '21 at 08:37

78

I succeeded by using a form control. This is my html code :

<md-input-container>
    <input type="number" min="0" max="100" required mdInput placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl">
    <md-error>Please enter a value between 0 and 100</md-error>
</md-input-container>

And in my Typescript code, I have :

this.rateControl = new FormControl("", [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.

edited Feb 18 '21 at 08:37

svarog

9,477
4
61
77

answered Aug 03 '17 at 12:52

Adrien

2,866
4
23
46

5

Note: I discovered that I needed ReactiveFormsModule imported in my module to use this solution. – peregrination Feb 26 '18 at 17:01
5

Commenting for Mateusz Adamczyk: OK, I need to add a separate answer because I just created the account to write it down and cannot add a comment to @Adrien post. DON'T MIX REACTIVE FORM WITH TEMPLATE-DRIVEN FORM! I don't know why the hell he has most upvotes here. Just please, don't do it. btw, the best solution I found for that case: https://stackoverflow.com/a/52259458/10380064. – Korashen Sep 18 '18 at 13:09
2

where to input the line "this.rateControl..." in type script? The constructor or ngOnInit() or somewhere? – anhtv13 Oct 24 '18 at 08:55
2

Don't use this. Angular states: Note that support for using the ngModel input property and ngModelChange event with reactive form directives was deprecated in Angular v6 and is scheduled for removal in a future version of Angular. For details, see Deprecated features. from https://angular.io/api/forms/FormControlDirective#use-with-ngmodel – Pier May 01 '20 at 15:31
@Pier Yes, you are right. But it's deprecated in Angular 6 and in my question it was for Angular v4. So for Angular 4, it's working. – Adrien May 01 '20 at 15:49

score 29 · Answer 2 · answered Aug 03 '17 at 09:59

29

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.

answered Aug 03 '17 at 09:59

Sandip - Frontend Developer

14,397
4
35
61

17

Woah! thats a bad thing isnt't thats like the most basic functionality or else whats the point of validation in angular ? – BlackBurn027 Sep 18 '18 at 09:32
this is how you disable it. https://stackoverflow.com/a/54348294/12097072. Thanks for the tip – stoneshishang Sep 20 '22 at 18:06

score 6 · Answer 3 · answered Aug 03 '17 at 10:17

6

Here is the solution :

This is kind of hack , but it will work

<input type="number" 
placeholder="Charge" 
[(ngModel)]="rateInput" 
name="rateInput"
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?"
required 
#rateInput2 = "ngModel">

<div *ngIf="rateInput2.errors && (rateInput2.dirty || rateInput2.touched)"
    <div [hidden]="!rateInput2.errors.pattern">
        Number should be between 0 and 100
    </div>
</div>

Here is the link to the plunker , please have a look.

answered Aug 03 '17 at 10:17

Vivek Doshi

56,649
12
110
122

It works, but I use material design so I would have the same design that other inputs... – Adrien Aug 03 '17 at 12:30
Nope it will also works with yours just put that input fields inplace of yours and try – Vivek Doshi Aug 03 '17 at 12:34
No, I don't have the material design on it. – Adrien Aug 03 '17 at 12:47
@VivekDoshi Yes it works great also in mat input feilds – Sachin from Pune Feb 27 '19 at 16:58

score 3 · Answer 4 · answered Aug 03 '20 at 17:17

3

You can control with a change event if the input is within your range, if it is not in the range you assign 0.

<md-input-container>
  <input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput"
    (change)= "rateInput < 0 ? rateInput = 0 : rateInput; rateInput > 100 ? rateInput = 0 : rateIntput;"
    name="rateInput">
  <md-error>Required field</md-error>
</md-input-container>

answered Aug 03 '20 at 17:17

Juan Sebastian Rodriguez

41
3

...rateInput > 100 ? rateInput = 0 : rateIntput; I thhink it will be better: rateInput > 100 ? rateInput = 100 : rateIntput; – sandroid Jan 11 '23 at 12:09

score 1 · Answer 5 · answered Mar 12 '19 at 19:17

1

Simply do this in angular2+ by adding (onkeypress)

<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 >= 48 && event.charCode <= 57"
    name="rateInput">

Tested on Angular 7

answered Mar 12 '19 at 19:17

Ian Samz

1,743
20
20

Could you please elaborate on your answer? – Georgi Stoimenov Aug 13 '19 at 15:55

score 1 · Answer 6 · answered Jul 30 '20 at 08:39

[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':

<input type="number" [min]="0.00" [max]="100.00" [step]="0.01" formControlName="rateFC">

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.

<button type="submit" [disabled]="!myFG.valid">Submit</button>

score 1 · Answer 7 · answered Jul 29 '21 at 12:07

I did a workaround with ngModelChange. In my case I wanted to avoid that users set a year earlier than current year. In html

<div class="col">
      <label>Year<span *ngIf="yearInvalid" class="badge badge-danger ml-1"> Year is invalid</span></label>

      <input class="form-control" type="number" id="year" name="year" #year="ngModel"
      [(ngModel)]="projection.year" required pattern="(?:19|20)[0-9]{2}"
      (ngModelChange)="checkYear($event)" />
</div>

And in angular I just check on model change:

checkYear(e) {
    if (e < new Date().getFullYear()) {
      this.yearInvalid = true;
    }
    else {
      this.yearInvalid = false;
    }
  }

I think it can work very good with 0-100 or any other check that you need to do.

JayChase · Answer 8 · 2020-03-12T10:02:42.640

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<HTMLInputElement>,
    private renderer2: Renderer2,
    @Optional() @Self() private formControlName: FormControlName,
    @Optional() @Self() private formControlDirective: FormControlDirective
  ) {}

  private valueIsLessThanMin(min: any, value: number): boolean {
    return typeof min === "number" && value && value < 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)]
      }
    ]
  });

score 0 · Answer 9 · answered Aug 08 '20 at 06:07

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

score -10 · Answer 10 · edited Sep 18 '18 at 02:51

-10

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

edited Sep 18 '18 at 02:51

franiis

1,378
1
18
33

answered Sep 17 '18 at 14:59

Gisler Garces Vargas

1

Min and max value of input in angular4 application

10 Answers10

Linked