如何设置与实际值不同的输入控制值答案

【问题标题】：How to set presented input control value different than actual value如何设置与实际值不同的输入控制值
【发布时间】：2019-09-05 09:53:34
【问题描述】：

我正在使用角度材料，我们有输入类型的文本。目标是呈现这样的数字：

2 000.02
3 000.00
433 232 223.21

简而言之，我想每 3 位显示一个带有空格的值，但对于后端，我想发送相同的值但没有空格。

到目前为止，我使用正则表达式向每 3 位数字添加空格，并且在 ngOnDestroy 上我正在删除它们。这个组件必须这样做，因为在此过程中我有很多服务。这种方法不起作用，因为首先我发送帖子，然后我们导航和销毁组件，所以我仍然发送带有空格的值。

想知道是否有聪明的方法来解决这个问题。类似于将输入实际值与表示值、掩码等分开的东西。

【问题讨论】：

npmjs.com/package/ngx-mask

标签： angular input angular-material

【解决方案1】：

与其处理ngOnDestroy 上的空间删除，不如在调用服务的方法中处理它？我建议您不要修改原始值，而是克隆原始对象，然后修改该克隆对象。这样您就不必担心显示正确的格式。

callToService() {
  let clonedObject = JSON.parse(JSON.stringify(this.inputValue));
  // Now remove the spaces from clonedObject and send that object to the API
}

就像@Abdul 提到的，更友好的解决方案是使用ngx-mask 之类的东西。

【讨论】：

我无法在服务中执行此操作，因为我将配置传递给后端的输入，但我不知道哪个输入将具有“金额”文本转换。进程超大后发送到后端的json。文本字段组件必须以某种方式完成。服务不应该知道有关输入的任何信息。
我没有直接说在服务中，而是在你调用服务的方法中。难道你不能检查一下输入值是哪种格式，然后按照我上面所说的去做吗？

【解决方案2】：

是的，有。使用accounting 你可以做一个助手：

export function formatNumber(value) {
    return accounting.formatMoney(value, '', 0, ' ', '.');
}

export function unformatNumber(value) {
    return accounting.unformat(value);
}

您可以根据需要简单地调用 format/unformat。

演示： https://stackblitz.com/edit/angular-jn5bkh?file=src/app/app.component.ts

【讨论】：

我创建了按预期工作的方法。他们在正确的位置添加或删除空格。我想以某种方式改变用户在屏幕上看到的 formControl 值。
@wantToBeAProgrammer 你可以使用.patchValue?用于更新 formControl 值。