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

我正在使用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来说明这种情况。

最佳答案

我将为此创建一个指令:

@Directive({
  selector: '[numeric]'
})

export class NumericDirective {

  constructor(private model: NgControl) { }

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

在HTML中，只需添加numeric属性即可:

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

DEMO

关于angular - 如何显示一个值并在FormControl中保留另一个值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45622986/