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,234时，输入元素中的显示值将显示$ 1,23。 控制台输出正确的值{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

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>

Answer 2

您的问题启发了我创建我将使用的CurrencyDirective。 它不能以您现有的方式来实现，但是我相信它可以代替或希望帮助他人。

StackBlitz-货币格式指令

原因：

• 我们不应在我们的价值$1,234放置货币符号
• 我们应该将格式设置为用户类型（无痛UX）
• 我们应该将货币值另存为原始数字（条带格式）
• 我们不应该对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/, ''));