Input number with at least two decimal places

Ionic Framework ionic-v3
1

How I can mask the ionic input, type=number, to accept only number with 2 two decimal places?

<ion-input text-right [(ngModel)]=“mynumber” type=“number” >

I tried step=“0.01” but it not works!

2

I’ve created this solution to myself, I hope it helps you too:

<ion-input type="number" value="0.00" (ionChange)="formataNumero($event)"></ion-input>

And:

  formataNumero(e: any, separador: string = '.', decimais: number = 2) {
    let a:any = e.value.split('');
    let ns:string = '';
    a.forEach((c:any) => { if (!isNaN(c)) ns = ns + c; });
    ns = parseInt(ns).toString();
    if (ns.length < (decimais+1)) { ns = ('0'.repeat(decimais+1) + ns); ns = ns.slice((decimais+1)*-1); }
    let ans = ns.split('');
    let r = '';
    for (let i=0; i < ans.length; i++) if (i == ans.length - decimais) r = r + separador + ans[i]; else r = r + ans[i];
    e.value = r;
  }

Just type the numbers. Remembering that your end user will use only the number digits and “backspace”, no more. If you set “decimais” to 3, you can work with weights or something like that. Test into DevApp too.

Simple like that.

9 Likes
3

Somebody marks this as the right answer for God’s sake! Congratulations, man. Very good job! People request installation of angular2-text-mask to do this trick. Your solution is simpler and better.

5

Thanks! We need to simplify our lives helping ourselves!

6

Lovely solution, didnt have to modify even a single word for implementation :slight_smile:

7

Excelente solución!!!

tuve que hacer una variante para mi app PWA con IONIC 5 y ANGULAR 9

“@ionic-native/app-version”: “^5.22.0”,
“@angular/animations”: “^9.0.4”,

  formataNumero(e: any, separador: string = ',', decimais: number = 2) {

    let a: any = e.detail.value.split('');
    let ns = '';
    a.forEach((c: any ) => { if (!isNaN(c)) { ns = ns + c; } });
    ns = parseInt(ns).toString();
    if (ns.length < (decimais + 1)) { 
      ns = ('0'.repeat(decimais + 1) + ns); 
      ns = ns.slice((decimais + 1) * -1); 
    }
    let ans = ns.split('');
    let r = '';
    for ( let i = 0; i < ans.length; i++ ) {
      if (i === ans.length - decimais) {
        r = r + separador + ans[i];
      } else {
        r = r + ans[i];
      }
    }
    // e.detail.value = r;
    this.orderAmountField.setValue(r);
  }

Y como uso coma ‘,’ como separador decimal

tuve que usar formato string en el Form y luego lo convierto a float cuando lo almaceno en el campo numérico,

en el html:

<ion-input type="text" (ionChange)="formataNumero($event)"   formControlName="orderAmount" [placeholder]="'ENTER_ORDER_AMOUNT' | translate">

en el TS:

cuando configuro el formulario ( this.form )

    const orderAmount  = '';
    this.form = new FormGroup({
      orderAmount: new FormControl(orderAmount, [
        Validators.required,
      ]),
    ...

y cuando lo almaceno en el objeto que va a la BD.

    order.amount = parseFloat(formData.orderAmount.replace(',', '.'));

espero que les sirva a los que tengan el mismo contexto de tecnologías que yo.

1 Like