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

admin管理员组

文章数量:1314496

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

Share Improve this question Follow asked Jul 3, 2020 at 5:53 Shaik HabeebShaik Habeeb 21511 gold badge77 silver badges2222 bronze badges 6

• 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

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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

本文标签：