Limit max value of input field in html

Question

How to limit user from entering value greater than order.leftToFulfill ?

  <input  class="table-input" type="number" name="check"  [(ngModel)]="tempFulfill" matInput min="1" max="{{order.leftToFulfill}}" oninput="this.value = Math.abs(this.value)">

What I have to do is: for instance if order.leftToFulfill=50 than I have to restrict user from entering value greater than 50.

The `max` parameter of the `input` does not restrict the user from inputting a number greater than `max`, it just puts the form into a state which cannot be submitted by the user, if the `max` criteria evaluates to false. — maio290, Dec 31 '18 at 09:08
Related: [Limit input box to 0-100](https://stackoverflow.com/questions/1384074/limit-input-box-to-0-100). And [Min and max value of input in angular4 application](https://stackoverflow.com/questions/45480004/min-and-max-value-of-input-in-angular4-application) Might help you — Mukyuu, Dec 31 '18 at 09:10
Why you are not using the ReactiveForms? It's much simpler to implement "Input Validation" there. If you are implementing on your own so I would go for a "Pipe" — hackp0int, Dec 31 '18 at 09:11
I don't want to use javascript. Can you send me link ReactiveForms — Mini, Dec 31 '18 at 09:12
If you don't want to use javascript, you may not use Angular too. Really, if you choose to work with a framework, use it's functions or leave it. — maio290, Dec 31 '18 at 09:15
I have tried with maxlength. But it is still allowing values greater than maxlength — Mini, Dec 31 '18 at 09:18
Checkt this link it may work :https://stackoverflow.com/questions/46829107/angular-2-set-input-max-length-dynamically — soorapadman, Dec 31 '18 at 09:18
Another related link: [Min / Max Validator in Angular 2 Final](https://stackoverflow.com/questions/39847862/min-max-validator-in-angular-2-final/52259458#52259458). Honestly though, if you add your code on [Stackblitz](https://stackblitz.com/) or [CodePen](https://codepen.io/) or even a simple fiddle people would had easier time helping you. — Mukyuu, Dec 31 '18 at 09:19
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 — Mini, Dec 31 '18 at 09:23

score 0 · Answer 1 · answered Dec 31 '18 at 09:58

Check the following Stackblitz Demo

Html:

<input type="text" [maxLength]="maxLength" [ngModel]="value" (ngModelChange)='up($event)'/>

app.component.ts:

import { Component, Injectable } from '@angular/core';

@Injectable()
export class MyService {

  MAXLENGTH = 2;

  getMaxLength() {
    return this.MAXLENGTH;
  }

}


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 4';
  maxLength: number;
  value = 0;
  constructor(private myService: MyService) {
    this.maxLength = myService.getMaxLength();
  }
  up(newValue) {
    console.log(newValue);
    if (newValue < 0) {
      this.value = 0;
    } else if (newValue > 50) {
      this.value = 50;
    } else {
      this.value = newValue;
    }
  }
}

Explanation:

MAXLENGTH = 2;

 getMaxLength() {
    return this.MAXLENGTH;
 }

Used to limit input length to x where as in example x=2.

Core to limit value:

 up(newValue) {
    if (newValue < 0) {
      this.value = 0;
    } else if (newValue > 50) {
      this.value = 50;
    } else {
      this.value = newValue;
    }
  }

Checked whether value was less than 0 or more than 50 and if not set them to min/max value.

Limit max value of input field in html

1 Answers1