2

I have an Angular 8 application. What I wanna do is not letting user to set any other value in number input, than from range of 0-100

I was thinking something like this

<input type="number" [ngModel]="value" (ngModelChange)="validateValue($event)">

and

value = 100;

validateValue(event: number) {
    if (event > 100) {
      this.value = 100;
    } else if (event < 0) {
      this.value = 0;
    } else {
      this.value = event;
    }
}

When there is a 100 and I delete last digit and write 5 (so now I should have 105), it will do the magic and change the value to 100.

When I cursor select the whole number and write for example 105, it will do the magic too.

However. when I use the step arrows, or cursor select the last digit and change the last digit, the magic isn't happening.

Why is this not working ?

Tomas Lukac
  • 1,923
  • 2
  • 19
  • 37

3 Answers3

3

I just ran into this problem myself. As you discovered, Angular appears to pay no attention to the max/min attributes set on a number input. Those are only heeded by the spinner buttons (which are actually managed by the browser directly, not Angular). In traditional HTML/JavaScript, a typed value outside the bounds of the field is regarded as 'undefined'; in Angular, it accepts the typed values.

This workaround should achieve what you want; if you (or anyone reading this) want an out-of-range value to be set to 'undefined' instead, remove the setTimeout() calls.

public realValue : number;
public min : number = 0;
public max : number = 100;

get value() : number {
    return this.realValue;
}

set value(newValue : number) {
    this.realValue = newValue;
    if(this.realValue < this.min){
        this.realValue = undefined;
        setTimeout(() => {this.realValue = this.min;});
    }
    else if(this.realValue > this.max){
        this.realValue = undefined;
        setTimeout(() => {this.realValue = this.max;});
    }
}
<input type="number" [(ngModel)]="value" [min]="min" [max]="max" (ngModelChange)="changeCallback()" />

Creating a pseudo-property with the getter and setter routes Angular's ngModel binding through your custom logic, ensuring that the value will always remain within your bounds, no matter how it gets set. Unfortunately, it does appear to be necessary to set the value to 'undefined' briefly; for some reason, Angular wasn't updating the displayed value in the field when I was simply setting realValue to min or max directly. Setting it to undefined, then using setTimeout to set the desired value, seems to force an update, although there is a weird blinky behavior as a result.

Hersfold
  • 91
  • 7
2

You can try this : 

public value;

  validateWhite(event: number) {

    if (event > 100) {
      this.value = 100;
    } else if (event < 0) {
      this.value = 0;
    } else {
      this.value = event;
    }
  }

In template : 

<input type="number" [(ngModel)]="value" (ngModelChange)="validateWhite($event)">

It works well to me :)

Jihoon Kwon
  • 745
  • 5
  • 14
  • It is basically the same think I did, still does not work. You are telling me, that if you select (highlight) the last digit and rewrite it, it will do the trick for you? – Tomas Lukac Jan 23 '20 at 14:15
  • @TomasLukac Did you change "public value;" code?, NOT "value = 100;". I have tried several times, all work well. I hope it will be helpful to you. – Jihoon Kwon Jan 23 '20 at 23:32
  • Know Yes, I have changed the 'public value' part and I can still change the number when highlighting it. https://imgur.com/a/mIXdrbN – Tomas Lukac Jan 24 '20 at 13:21
  • I am also facing the same issue. Mouse select of last digit and replaced with another invalid digit fails this magic.. – vinsinraw Mar 16 '22 at 09:09
0

Try with Min and Max attributes. 

   <input type="number" min="1" max="5">

This wont let the step arrows allow exceed the number

Daniel Alejandro Lima Monzon
  • 29
  • 3