Angular 8 自定义货币掩码

Question

现在我正在制作一个应该与角度反应形式兼容的货币掩码指令。这是我的 Stackblitz https://stackblitz.com/edit/angular-8-currency-directive-insert。

在输入元素中，我希望当我输入 1、2、3、4、5 时，我会在控制台中看到 {currency: "$1,234"} 因为掩码运行 .substring(0, 4) 但是我看到 {currency: "$1,2345"}。 我在输入元素中看到正确的显示值为 $1,234。

如果我将 .substring(0,4) 更改为 .substring(0,3)，则输入元素中的显示值显示为 $1,23，而我希望它显示为 $1,234。控制台输出正确的 {currency: "$1,234"}

值

非常欢迎任何能找到问题根源的建议！我已经完成了一些工作，包括拆分成一个数组、检查、弹出末端和加入，但这些修复并不理想。不过，仍然欢迎任何建议！

感谢您的支持。

要关注的代码在下面提供的 currency.directive.ts 中：

 onInputChange(event, backspace) {
    let newVal = event.replace(/\D/g, '');
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '$1');
    // } else if (newVal.length <= 4) {
    //   newVal = newVal.replace(/^(\d{0,1})(\d{0,3})/, '$1,$2');
    } else {
      newVal = newVal.substring(0, 4);
      newVal = newVal.replace(/^(\d{0,1})(\d{1,3})/, '$1,$2');
    }
    this.ngControl.valueAccessor.writeValue("$"+ newVal);
    // console.log(this.toNumber(newVal))
  }

Answer 1

您的问题启发了我创建一个可以使用的 CurrencyDirective。它不会像您那样处理这种情况，但我相信它可以被用来代替或希望帮助他人。

StackBlitz - Currency Format Directive

原因：

• 我们不应该在我们的价值中加入货币符号$1,234
• 我们应该格式化为用户类型（无痛用户体验）
• 我们应该将我们的货币价值保存为原始数字（带 格式）
• 我们不应该对 3 个字符、4 个字符、5 个字符等进行正则表达式来有条件地添加格式（逗号或点）

这就是我所做的。 我处理paste、input 和drop 事件，但格式化是在getCurrencyFormat() 内完成的：

getCurrencyFormat(val) {
    // 1. test for non-number characters and replace/remove them
    const filtered = parseInt(String(val).replace(this.currencyChars, ''));

    // 2. format the number (add commas)
    const usd = this.decimalPipe.transform(filtered, '1.0');

    // 3. replace the input value with formatted numbers
    this.renderer.setProperty(this.el.nativeElement, 'value', usd);
}

我认为应该以原始数字来节省货币。所以在提交表单时我这样做：

Number(this.form.get('currency').value.replace(/[^0-9]g/, ''));

Answer 2

Stackblitz https://stackblitz.com/edit/angular-8-currency-directive-insert-jdwx4b

货币自定义输入

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-currency',
  template: '<input [(ngModel)]="value" (keyup)="setValue(value)">',
  styleUrls: ['./currency.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyComponent),
      multi: true
    }
  ]
})
export class CurrencyComponent implements ControlValueAccessor {

  value;

  constructor() {
  }

  setValue(event) {
    let newVal = event.toString().replace(/\D/g, '');
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '$1');
    } else {
      newVal = newVal.substring(0, 4);
      newVal = newVal.replace(/^(\d{0,1})(\d{1,3})/, '$1,$2');
    }
    newVal = '$' + newVal;
    if (newVal) {
      this.value = newVal;
      setTimeout(() => {
        // sometimes it needs a tick, specially first time
        this.propagateChange(this.value);
      });
    }
  }

  writeValue(value: any) {
    if (value !== undefined) {
      this.setValue(value);
    }
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {
  }

  propagateChange = (_: any) => {
  }

}

用法

<app-currency formControlName="currency"></app-currency>