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

【问题标题】：Add Currency Mask without trigger Validation in Angular Reactive Form在 Angular 反应形式中添加没有触发器验证的货币掩码
【发布时间】：2019-02-05 19:21:01
【问题描述】：

我在我的 Angular 项目中使用响应式表单。而且我需要将一些输入格式化为货币格式。

我创建了一个货币掩码指令，类似于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>

组件.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;
  };
}

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

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

我真的很感激。

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

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

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

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

工作示例：Stackblitz

【讨论】：