2017-02-07 10 views
1

Я хочу форматировать ввод в валюту США по мере ввода. Вход будет иметь 2 десятичных знака и будет вводиться справа налево. Предположим, что если я напечатаю 54.60, он будет введен как $ 0,05 -> $ 0,54 -> $ 5.46 -> $ 54.60. Это PLUNKER точно делает это, но его в угловых js. До сих пор моя директива выглядит следующим образом:Формат ввода валюты в угловом формате 2

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 он используется как:

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

Update:

, что, наконец, работал для меня:

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) 
    } 
+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 }); 

или

использование валюта трубы для форматирования в формат USD, используя только

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

Надеется, что это помогает.

+0

, это позволяет мне вводить только 1 цифру за раз, если я набираю 7, тогда он показывает 0.07 ; то, если я набираю 8, он делает это 0 ... он продолжает действовать таким образом. – Jane

+0

Предполагаю, что вы получаете символ из события, в этом случае вам нужно добавить новый символ в конце strVal. лучший способ (конечно, это мое мнение) было бы использовать двустороннюю привязку в угловом2, в результате чего ввод обновляется с помощью ngModel и обновляет эту переменную после каждого нажатия клавиши – hakany

+0

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