angular - 如何在我的 FormControl 中显示一个值并保留另一个值？

Question

我正在使用 text-mask lib，它工作得很好。

考虑以下掩码的配置:

priceMask = Object.freeze({
  mask: createNumberMask({
    allowDecimal: true,
    decimalSymbol: ',',
    integerLimit: 7,
    prefix: '',
    thousandsSeparatorSymbol: '.'
  })
});

在我的 HTML 中，我有以下内容:

<form [formGroup]="formGroup">
  <input type="text"
         formControlName="maskedInput"
         [textMask]="priceMask">
</form>

您可能已经注意到，在我的掩码配置中，我将一个字段限制为具有如下值:

9.999.999,99

但是，虽然我想向用户显示这种特定格式，但我想在我的 control 中获得不同的值，例如:

9999999,99

这可能吗？

我希望这个问题足够清楚。谢谢。

这是一个 plnkr我创建的是为了说明情况。

Answer 1

我会为此创建一个指令:

@Directive({ selector: '[numeric]' })
export class NumericDirective {
  constructor(private readonly model: NgControl) {}

  @HostListener('input') inputChange(): void {
    const newValue = this.model.value.replace(/\./g, '');
    this.model.control.setValue(newValue);
    this.model.valueAccessor.writeValue(newValue);
  }    
}

在 HTML 中，只需包含 numeric 属性:

<form [formGroup]="formGroup">
  <input numeric
         formControlName="maskedInput"
         [textMask]="priceMask">
</form>

DEMO