正则表达式在 Angular 2+ Pipe with Reactive Form 中失败

Question

我有以下设置：

模板：

<form [formGroup]="myForm">
  <input formControlName="amount" placeholder="Amount">
</form>

组件：

import { Component, OnInit, HostListener } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UdpCurrencyMaskPipe } from '../../../_helpers/udp-currency- 
mask.pipe';

export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(
    private builder: FormBuilder,
    private currencyMask: UdpCurrencyMaskPipe,
  ) {
    this.myForm = builder.group({
      amount: ['', Validators.required]
    });

    this.myForm.valueChanges.subscribe(val => {
      if (typeof val.amount === 'string') {
        const maskedVal = this.currencyMask.transform(val.amount);
        if (val.amount !== maskedVal) {
          this.myForm.patchValue({amount: maskedVal});
        }
      }
    });
  }    
}

烟斗：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'udpCurrencyMask'
})
export class UdpCurrencyMaskPipe implements PipeTransform {
    amount: any;

    transform(value: any, args?: any): any {

        let amount = String(value);

        const beforePoint = amount.split('.')[0];
        let integers = '';
        if (typeof beforePoint !== 'undefined') {
            integers = beforePoint.replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, 
'$&,');
        }
        const afterPoint = amount.split('.')[1];
        let decimals = '';
        if (typeof afterPoint !== 'undefined') {
        decimals = afterPoint.replace(/\D+/g, '');
        }
        if (decimals.length > 2) {
            decimals = decimals.slice(0, 2);
        }
        amount = integers;
        if (typeof afterPoint === 'string') {
            amount += '.';
        }
        if (decimals.length > 0) {
            amount += decimals;
        }

        return amount;
    }
}

并且此输入字段的输出表现如下：输入：1234 输出：1,234（按预期工作）但是，如果您添加一个额外的数字（例如 5），输出将变为 1,2,345

我认为正则表达式

/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,'

会将逗号放在适当的位置（即 12,345 等 123,456...等）

我错过了什么？感谢任何帮助，谢谢。

Answer 1

您似乎将修改后的字符串（已包含逗号的字符串）传递给了 transform 函数。

您可以在操作前删除所有 , 个字符：

let amount = String(value).replace(/,/g, '');

正则表达式在 Angular 2+ Pipe with Reactive Form 中失败

Regex failing inside Angular 2+ Pipe with Reactive Form

regex

angular

angular-reactive-forms