Question

我在Angular项目中使用反应形式。而且我需要将一些输入格式设置为货币格式。

我创建了货币Mask的指令，类似于Format currency input in angular 2

指令

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[formControlName][currencyMask]',
})
export class CurrencyMaskDirective {
  @Output() rawChange:EventEmitter<number> = new EventEmitter<number>();

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(event.target.value, true);
  }


  onInputChange(event, backspace) {
    var newVal = (parseInt(event.replace(/[^0-9]/g, ''))).toLocaleString('en-US', { minimumFractionDigits: 0 });
    var rawValue = newVal;

    if(backspace) {
      newVal = newVal.substring(0, newVal.length - 1);
    }

    if(newVal.length == 0) {
      newVal = '';
    }
    else  {
      newVal = newVal;
    }

    this.ngControl.valueAccessor.writeValue(newVal);
    rawValue = rawValue.replace(/\,/g, '');
    this.rawChange.emit(parseInt(rawValue));
  }
}

html代码

<div class="input-group">
  <input type="text" class="form-control" currencyMask formControlName="money">
</div>

component.ts

this.detail.forEach(data => {
  control.push(this.fb.group({
    money: [this.currencyTransform(money), [minValue(0)]]
    })
 })
currencyTransform(val: number) {
  return this.decimalPipe.transform(val, '1.0-2');
}
function minValue(min: number): ValidatorFn {
  return (c: AbstractControl): { [key: string]: boolean } | null => {
    if (c.value !== null && (isNaN(c.value) || c.value <= min)) {
      return { 'minValue': true };
    }
    return null;
  };
}

但是，我可以基于使用货币掩码正确显示输入字段（例如：10000）（显示为10,000），但是由于数据已更改为货币格式（自从现在更改为，所以它也会触发我的验证） 10,000）。

我应该怎么做仍保存为数字（例如：10000）而不是货币格式（10,000）？因此它不会触发我的验证。也许我使用的方式是错误的？那我该怎么做才能使货币掩码具有反应性形式，但仍保存为未格式化数据的数字？

我真的很感激。

Answer 1

您可以使用@rxweb的验证程序来验证货币字段中的货币，尝试使用RxwebValidators的数字验证，因为您必须将isFormat设置为true，从而可以根据需要设置货币格式，并且不需要为此使用任何自定义指令。

只需将此代码放入您的组件ts中：

 ngOnInit() {
        this.userInfoFormGroup = this.formBuilder.group({
            money:['', RxwebValidators.numeric({acceptValue:NumericValueType.PositiveNumber  ,allowDecimal:false,isFormat:true })], 
        });
    }

工作示例：Stackblitz

在Angular反应形式中添加没有触发验证的货币掩码

1 个答案: