이온 입력에서 소수 2 자리를 강제로 입력하십시오.

Question

항상 소수 자릿수 2 자리 숫자로 표시하고 싶습니다.이온 입력에 숫자를 표시하고 싶습니다. 내 모델은

1.10로 1.20 1.1 및 1.2 만 나타납니다 : HTML 파일로

export class HomePage { 
    public myValue:number; 
} 

다음과 같이 그래서 :

1.01 
1.10 
1.20 
1.23 

는 표시되지된다

<ion-content padding> 
    <h3>Hello</h3> 
    <ion-row margin-right="50px" margin-left="50px"> 
     <ion-input type="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" 
       [(ngModel)]="myValue" placeholder="0.00"></ion-input> 
    </ion-row> 
</ion-content> 

나는 또한 간단하게 시도했습니다.

<ion-input type="number" step="0.01" 
        [(ngModel)]="myValue" placeholder="0.00"></ion-input> 

그것은 웹 브라우저에서 작동 (맥 OS는, 55.0.2883.95은 (64 비트))하지만 안드로이드에서 작동하지 않습니다 (7.1 테스트)

어떤 제안이?

Answer 1

숫자를 입력 할 때 저장하고 값을 출력 할 때는 decimal pipe을 사용하십시오. 당신은 아마도 검증 로직의 한 부분으로, 구성 요소 자체 내에서 파이프를 사용하려면

{{ myValue | number:'1.2-2' }}

, 당신은 그것을 삽입 할 수 2DP이 항상 표시됩니다.

import { DecimalPipe } from '@angular/common'; 
class MyService { 

    constructor(private decimalPipe: DecimalPipe) {} 

    twoDecimals(number) { 
     return this.decimalPipe.transform(number, '1.2-2'); 
    } 
} 

참고 : 당신은 providerapp.module.ts에

app.module.ts

import { DecimalPipe } from '@angular/common'; 

providers: [ 
    DecimalPipe 
    ] 

Answer 2

    **HTML : **     
<ion-input type="number" [(ngModel)]="defaultQuantity" formControlName="defaultQuantity" (ngModelChange)="changeQuantity($event)"> 


    ***Function : *** 

    import { ChangeDetectorRef } from '@angular/core'; 

    export class OrderPage { 

    constructor(public cdRef : ChangeDetectorRef){} 

      changeQuantity(value){ 
        //manually launch change detection 
        this.cdRef.detectChanges(); 
        if(value.indexOf('.') !== -1) 
        { 
         this.defaultQuantity = value.substr(0, value.indexOf('.')+3); 
        } else { 
         this.defaultQuantity = value.length > 4 ? value.substring(0,4) : value; 
        } 
       } 

    } 


     **OUTPUT :** 

       1.01 
       1.10 
       1.20 
       1.23