2017-02-07 1 views
1

입력 할 때 입력을 USD 통화로 형식화하고 싶습니다. 입력은 소수점 2 자리를 가지며 오른쪽에서 왼쪽으로 입력됩니다. 54.60을 입력하면 $ 0.05 -> $ 0.54 -> $ 5.46 -> $ 54.60으로 입력된다고 가정하십시오. 이 PLUNKER은 정확하게 이것을 수행하지만 각도 j에 있습니다.각도 2의 통화 형식을 입력하십시오.

<input name="cost" placeholder="cost" class="form-control" type="text" currency formControlName="cost" (rawChange)="rawCurrency=$event"> 

업데이트 : 마지막으로 나를 위해 일한 것을

입니다 :

onInputChange(event: any, backspace: any) { 
    var newVal = (parseInt(event.replace(/[^0-9]/g, ''))/100).toLocaleString('en-US', { minimumFractionDigits: 2 }); 
    var rawValue = newVal; 

    if(backspace) { 
     newVal = newVal.substring(0, newVal.length - 1); 
    } 

    if(newVal.length == 0) { 
     newVal = ''; 
    } 
    else { 
     newVal = newVal; 
    } 
    // set the new value 
    this.model.valueAccessor.writeValue(newVal); 
    this.rawChange.emit(rawValue) 
    } 
import {Directive, Output, EventEmitter} from '@angular/core'; 
import {NgControl} from '@angular/forms'; 

@Directive({ 
    selector: '[formControlName][currency]', 
    host: { 
    '(ngModelChange)': 'onInputChange($event)', 
    '(keydown.backspace)':'onInputChange($event.target.value, true)' 
    } 
}) 
export class CurrencyMask { 
    constructor(public model: NgControl) {} 

    @Output() rawChange:EventEmitter<string> = new EventEmitter<string>(); 

    onInputChange(event: any, backspace: any) { 
    // remove all mask characters (keep only numeric) 
    var newVal = event.replace(/\D/g, ''); 
    var rawValue = newVal; 
    var str = (newVal=='0'?'0.0':newVal).split('.'); 
    str[1] = str[1] || '0'; 
    newVal= str[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') + '.' + (str[1].length==1?str[1]+'0':str[1]); 



    // set the new value 
    this.model.valueAccessor.writeValue(newVal); 
    this.rawChange.emit(rawValue) 
    } 
} 

가 HTML에서 같이 사용되는 :처럼 지금까지 나의 지시 본다
+0

질문을 진술 해주세요. – Blauhirn

+0

명시된 PLUNKER가 앵귤러 2에서 수행하는 작업을 수행하려는 경우 오른쪽에서 왼쪽으로 입력을 입력하고 서식을 즉시 지정하는 방법 – Jane

답변

0

입력 변경시 다음을 사용하십시오.

,
// remove dot and comma's, 123,456.78 -> 12345678 
var strVal = myVal.replace(/\.,/g,''); 
// change string to integer 
var intVal = parseInt(strVal); 
// divide by 100 to get 0.05 when pressing 5 
var decVal = intVal/100; 
// format value to en-US locale 
var newVal = decVal.toLocaleString('en-US', { minimumFractionDigits: 2 }); 

// or in singel line 
var newVal = (parseInt(myVal.replace(/\.,/g, ''))/100).toLocaleString('en-US', { minimumFractionDigits: 2 }); 

또는

사용 통화 관이 도움이 단지

var newVal = (parseInt(myVal.replace(/\.,/g, ''))/100) 

희망을 사용하여 USD 형식으로 포맷합니다.

+0

입력 한 번 입력하면 한 번에 한 자리 만 입력 할 수 있습니다. 그러면 0.07이 표시됩니다. ; 그럼 8을 입력하면 0이됩니다.이 방법으로 계속 작동합니다. – Jane

+0

이벤트에서 문자를 가져 오는 것으로 가정합니다.이 경우 strVal의 끝에 새 문자를 추가해야합니다. 가장 좋은 방법은 (물론 내 생각에) angular2에서 양방향 바인딩을 사용하여 입력이 ngModel로 업데이트되고 각 키 누르기 후에 해당 변수를 업데이트하는 것입니다. – hakany

+0

var newVal = (parseInt (myVal.replace (/\.,/) g, '') + newChar)/100) .toLocaleString ('en-US', {minimumFractionDigits : 2}); – hakany