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.

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.

• javascript
• html
• jquery
• angularjs
• angular

• 3 This will help you stackoverflow./questions/7372067/… – Sivakumar Tadisetti Commented Jul 3, 2020 at 5:56
• 1 Only allow positive numbers with only one decimal in Angular 6 – palaѕн Commented Jul 3, 2020 at 6:01
• @SivakumarTadisetti Thanks, my requirement is like not event to entered in input, without validations support, entry also should not happen... – Shaik Habeeb Commented Jul 3, 2020 at 6:02
• Hi Shaik, I have added a solution.. Please check and let me know whether that solve your problem.. – aks44 Commented Jul 3, 2020 at 6:32
• Hello @aks44, usefull, when i decrease value when it is 0 (zero), showing value as 1, it should show 0 only – Shaik Habeeb Commented Jul 3, 2020 at 6:43

3 Answers 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

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');">

if you are using template driven approach, you can use this pattern : pattern="^[1-9]+[0-9]*$" on template where you have defined your field (html file). this is quick and easy