Amount validation

Ionic Framework Ionic Angular
1

hi i want to validate amount like this 23.56 in ionic 4 for input type number and i dont want dash(-) symbol to accept this input… please let me know how to achive this from past one month i am having this issue

2

you can simply check input data in keyboard event such as keyup,keydown,keypress or you can use input event like this

<ion-input (keypress)="isNumberKey($event)"></ion-input>

isNumberKey(evt)
{
     var charCode = (evt.which) ? evt.which : evt.keyCode;
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
             return false;
     return true;
}
1 Like
3

Thanks its working but i have one more requirement i want to accept single dot with two decimal digit like this 23.45 can you show for this also…

4 
isNumberKey(evt)
{
     var charCode = (evt.which) ? evt.which : evt.keyCode;
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
             return false;
     var pattern = /^[0-9]+.[0-9]{2}/g;
     return pattern.test(this.yourvariable); // just use your ngModal variable directly or you can pass in function
}
5

this is not working i tried

  1. 0-9 ↩︎

6

can you show your code?

7

validateNumber(evt) {
var pattern = /^[0-9]+.[0-9]{2}/g;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
else{
return pattern.test(evt);
//return true;
}
when i type 65.78 it is taking only 6

8

Screenshot_2020-03-26-13-32-54-31
Screenshot_2020-03-26-13-32-54-31720×1520 198 KB

can you send me this type of validation for all test cases only for text type number this keyboard open in device

9

here you can not use evt. as I said you have to put your ngModal variable here or if you use form control then the value of an input controle

10

but i am getting values through api and i am binding it my input field and again i want to change while change i want validation like this

11

have you use any variable to bind input or not?

12

values
values293×518 24.1 KB

here zero values are getting through response when i type new values that should have validation

13

i am using ngmodalchange function and passing the variable as item.Amt

14

can you show me your html code?

15 
    <ion-grid id="grid">
      <ion-row>
        <ion-col size="6">
          <ion-label style="font-size:12px">{{item.MedicineName}}</ion-label>
        </ion-col>

        <ion-col>
          <ion-input #Qty [(ngModel)]="item.Order_Qty" [disabled]="amountDisable"  onKeyPress="if(this.value.length==2) return false;"  appQtyMask
            style="border-bottom:1px solid  rgb(182, 177, 177);text-align:left;position:relative;float:left;margin-top:-3px;font-size:12px;height:20px;width:25px;"
            type="tel" (ionFocus)="checkNull(item)" (ionBlur)="checkIsEmpty(item,i)"  ></ion-input>
          <ion-label>{{item.Order_UoM}}</ion-label>
        </ion-col>

        <ion-col>
          <ion-input inputmode="decimal"
          [disabled]="amountDisable" (ionFocus)="checkNull(item)" [step]="0.01"  (keypress)="validateNumber(item.Amt,$event)"
           onKeyPress="if(this.value.length==8) {  return false;}" min="0"  
            (ionBlur)="checkIsEmpty(item)" [(ngModel)]="item.Amt" (ngModelChange)="saveData(item.Amt,i,item)" 
              class="itemAmount" type="number">
           </ion-input> 

        </ion-col>

      </ion-row>
    </ion-grid>
  </div>
16

your validateNumber function not matching with code
from html you pass two param when in your ts file you have only one

17

if i pass just $event in validate function nothing is accepting in input

18

May I suggest reading banana-in-the-box documentation? That whole page IMHO should be required reading for anybody working in Angular, although it’s admittedly rather dense.

The bottom line here is that when you write [(ngModel)]="foo", that desugars to [ngModel]="foo" (ngModelChange)="foo = $event". One consequence of this is that having a separate (ngModelChange) listener when you already have the one coming from the [(ngModel)] binding is fraught with peril and should be avoided as much as possible, especially if your (ngModelChange) listener is attempting to modify anything.

This is an instance of a generic rule that you can safely have either one writer or multiple readers, but multiple writers are a recipe for disaster. So I would suggest that if you absolutely need a separate (ngModelChange) listener, then take the banana out of the box and bind only [ngModel] in one direction.

19

my requirement is in that input box those vaues are getting through api response …
i want to validate in place of zero(0)

  1. If i enter 6788.7888 it should not allow to accept
  2. It should accept value 56.67 (only two digit after dot)
  3. it should not accpet like this 56…78( more then one dot)
    4.finally it should accept this value 0.75
    let me know the solution here i am not using form and my input type is number
20

Check this fiddle
http://jsfiddle.net/S9G8C/203/