以角度 2 格式化货币输入答案

【问题标题】：Format currency input in angular 2以角度 2 格式化货币输入
【发布时间】：2017-02-07 14:18:05
【问题描述】：

我想在您键入时将输入格式化为美元货币。输入将有 2 位小数，从右到左输入。假设如果我输入 54.60，它将输入为 $0.05-->$0.54-->$5.46-->$54.60。这个PLUNKER 正是这样做的，但它在 Angular js 中。到目前为止，我的指令看起来像：

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">

更新：

最终对我有用的是：

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

【问题讨论】：

您能说出您的问题吗？
我想执行 PLUNKER 在 angular 2 中所做的事情，如何从右到左输入输入并即时格式化

标签： javascript angular typescript directive

【解决方案1】：

在输入更改时使用以下内容

// 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)

希望这会有所帮助。

【讨论】：

它只允许我一次输入 1 个数字，如果我输入 7 则显示 0.07；然后如果我输入 8 它会变成 0...它会继续以这种方式运行
我假设您正在从事件中获取字符，在这种情况下，您需要在 strVal 的末尾附加新字符。最好的方法（当然这是我的观点）是在 angular2 中使用两种方式绑定，即使用 ngModel 更新输入并在每次按键后更新该变量
var newVal = (parseInt(myVal.replace(/\.,/g, '') + newChar) / 100).toLocaleString('en-US', { minimumFractionDigits: 2 });

【解决方案2】：

Angular 有一个 formatCurrency 方法

https://angular.io/api/common/formatCurrency

这是我在代码中使用它的方式：

需求是一个表单控件

formatMoney(value: string) {
    this.demand.setValue(
        this.formatMoneyBase(value)
    );
}

formatMoneyBase(value: string = ''): string {
    return value.length ? formatCurrency(parseFloat(value.replace(/\D/g, '')), 'en', '$').replace('$', '') : '';
}

【讨论】：