最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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.

Share Improve this question asked Jul 3, 2020 at 5:53 Shaik HabeebShaik Habeeb 2151 gold badge7 silver badges22 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

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论