Hello. I am trying to create an input which users can enter number 2 decimal digits after dot.
12 => true
22.3 => true
24.44 => true
24.244 => false
I am going to make instant calculation with this value so I need to restrict what user typed instantly.
<ion-input type="number" placeholder="100" [(ngModel)]="miktar" (keydown)="onMiktarChange($event)"></ion-input>
I tried do this with keyCode
but .
,
and -
are returning the same value (229
) for my ion-input
. Numbers values are correct. These logs are 1...9 - ,.
respectively.
I tried to handle .
and -
in string at my .ts file with different events but I get undefined. Because of the type ="number"
ionic can’t catch these characters.
Then I changed my input type number
to text
and I use regex
to restrict input. This regex allows user to numbers and decimal 2 digits after one dot.
const MY_REGEXP = /^[0-9]+([.]|[.][0-9]{1,2})?$/;
onMiktarChange(num){
this.cdRef.detectChanges();
let regex = new RegExp(MY_REGEXP);
console.log(num.keyCode);
if(!regex.test(num)){
this.miktar = num.slice(0, -1);
}
That was working cool until I realize kind of a bug. User can’t enter alphabetic characters but input allows to these characters when I press 100 or 120 times alphabetic characters. On the other hand user can press emoji button and put emoji into the input
I did all kind of events (keydown)
(keyup)
(keypress)
and (ngModelChange)
I don’t think that the type of the event related to this problem. I am stuck. I really appreciate if you guys give me any advice to handle that problem. Thanks