Angular way to stop negative values from being entered in input type number (on copy-paste & increase, decrease) also

Question

my requirement is in an angular project i'm taking number input in a form like this

<input type="number" #input class="form-control" [(ngModel)]="dataItem.quantity"

i should not allow user to enter negative values even from copy-paste or through increase / decrease button of input type number or thought keyboard.

how can we acheive this, i have seen some directives, there they are taking input as 'text', my case is it should be "input type number" only.

It should allow decimals also.

Please Help me.

This will help you https://stackoverflow.com/questions/7372067/is-there-any-way-to-prevent-input-type-number-getting-negative-values — Sivakumar Tadisetti, Jul 03 '20 at 05:56
[Only allow positive numbers with only one decimal in Angular 6](https://stackoverflow.com/q/57151147) — palaѕн, Jul 03 '20 at 06:01
@SivakumarTadisetti Thanks, my requirement is like not event to entered in input, without validations support, entry also should not happen... — Shaik Habeeb, Jul 03 '20 at 06:02
Hi Shaik, I have added a solution.. Please check and let me know whether that solve your problem.. — aks44, Jul 03 '20 at 06:32
Hello @aks44, usefull, when i decrease value when it is 0 (zero), showing value as 1, it should show 0 only — Shaik Habeeb, Jul 03 '20 at 06:43

Sivakumar Tadisetti · Accepted Answer · 2020-07-03T06:38:04.683

3

You can do like below

HTML:

<input type="number" min="0" (input)="checkValue($event)">

TS:

checkValue(event) {
  if (event.target.value < 0) {
    event.target.value = 0;
  }
}

You can use (keyup) too

Update:

In the Angular way, you can create a pipe. Working stackblitz

In the HTML:

<input type="number" min="0" [ngModel]="testValue | nonegativevalue" (ngModelChange)="testValue=$event">

nonegativevaluepipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'nonegativevalue'})
export class NoNegativeValue implements PipeTransform {
  transform(value: number): number {
    if(value < 0) {
      value = 0;
      return value;
    }
    return value;
  }
}

If you use reactive form, then check this stackblitz

edited Jul 03 '20 at 06:38

answered Jul 03 '20 at 06:03

Sivakumar Tadisetti

4,865
7
34
56

In reactive forms approach how we use this pipe ? @Sivakumar Tadisetti – Shaik Habeeb Jul 03 '20 at 06:26
@ShaikHabeeb updated my answer, check below line of the answer ;) – Sivakumar Tadisetti Jul 03 '20 at 06:39

aks44 · Answer 2 · 2020-07-03T06:59:31.333

2

Try this..

<input type="number" min="0" #input class="form-control" [(ngModel)]="dataItem.quantity" 
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

edited Jul 03 '20 at 06:59

answered Jul 03 '20 at 06:20

aks44

422
3
12

if `input type='text'` then we don't see the increase and decrease buttons in the text box – Sivakumar Tadisetti Jul 03 '20 at 06:51
try type="number" min="0" – aks44 Jul 03 '20 at 06:59

Angular way to stop negative values from being entered in input type number (on copy-paste & increase, decrease) also

2 Answers2