Prevent negative numbers in ionic ion-input

Ionic Framework Ionic Angular
1

I have an numbers input field in my app and even tho I have prevented the numbers from going to negative values if I click fast enough it sometimes still happens. And the user can still type in the “-”(minus) character and thus causing an error… How can I make the input ignore the “-” character and not go lower than 0.

I have implemented some solutions from SO that I found but still I can input negative numbers…

here is my HTML code:

<ion-item lines="none" slot="end">
  <ion-icon color="vigros" name="remove-circle" (click)="decrementQty(product)"></ion-icon>
  <ion-input (keyup)="_keyUp($event)" type="number" value="0" min="0" step="1" [(ngModel)]="product.qty" oninput="validity.valid||(value='');"></ion-input>
  <ion-icon color="vigros" name="add-circle" (click)="incrementQty(product)"></ion-icon>
</ion-item>

and here is the TS code: I found this in one of the answers on SO but from what I can tell it does nothing…

_keyUp(event: any) {
    const pattern = /[0-9\+\ ]/;
    let inputChar = String.fromCharCode(event.key);
    if (!pattern.test(inputChar)) {
      event.preventDefault();
    }}

Anything else I can change to prevent the user to type in negative numbers and to prevent the numbers going lower than 0?

2

Hello, I don’t understand the keyUp method ?

Maybe not the best solution but it’s work :

<ion-item lines="none" slot="end">
    <ion-icon color="vigros" name="remove-circle" (click)="change(true)"></ion-icon>
    <ion-input label="hello" type="number" [min]="0" step="1" [(ngModel)]="product.qty"></ion-input>
    <ion-icon color="vigros" name="add-circle" (click)="change(false)"></ion-icon>
</ion-item>

change(decrease: boolean) {
    const n = this.product.qty;
    this.product.qty = decrease ? n > 1 ? n - 1 : 0 : n + 1;
}

I also suggest you to use buttons to increment and decrement. It’s more convenient from a UX point of view

3

your anwser is giving me the following error:

message: “Unsupported operand types: string * string”

I have these increment, decrement and onChange functions in my TS file:

  onChange(event: any, produkt) {
    const currVal = event.target.value;
    const eventNumber: number = +currVal;
    this.cartService.addUpdateProductToCart(eventNumber, produkt).subscribe(
      (data: any) => {
        console.log(data);
        this.product.qty = eventNumber;
        this.getCart();
      },
      error => {
        if(error.error.qty === 0) {
          this.errorToast(error.error.message, 'bottom');
        } else {
          this.errorToast(error.error.message, 'bottom');
        }
        this.product.qty = 0;
      }
    );
  };

  incrementQty(produkt: Product['product']) {
    const increasedQty = this.product.qty += 1.00;

    this.cartService.addUpdateProductToCart(increasedQty, produkt).subscribe(
      (data: any) => {
        console.log(data);
        this.product.qty = this.product.qty;
        this.getCart();
        this.scrollToBottomOnKeyboardOpen();
      },
      error => {
        if(error.error.qty === 0) {
          this.errorToast(error.error.message, 'bottom');
        } else {
          this.errorToast(error.error.message, 'bottom');
        }
        this.product.qty = 0;
      }
    );
  }

  decrementQty(produkt: Product['product']) {
    if(this.product.qty > 0) {
      const decreasedQty = this.product.qty -1;

      this.cartService.addUpdateProductToCart(decreasedQty, produkt).subscribe(
        (data: any) => {
          console.log(data);
          this.product.qty -= 1;
          this.getCart();
          this.scrollToBottomOnKeyboardOpen();
        },
        error => {
          console.log('Error', error.error);
          if(error.error.qty === 0) {
            this.errorToast(error.error.message, 'bottom');
          } else {
            this.errorToast(error.error.message, 'bottom');
          }
        }
      );
    }
  }