如何显示特定的小数位但仍保留输入 Angular 10 中的原始值？答案

【问题标题】：How to display specific decimal places but still keep raw value in input Angular 10?如何显示特定的小数位但仍保留输入 Angular 10 中的原始值？
【发布时间】：2021-08-02 07:07:35
【问题描述】：

我有一些麻烦。客户要求我们输入条件为

第 1 步：用户希望显示小数点后 2 位的数字
第 2 步：用户专注于输入 => 显示完整数字
第 3 步：在输入中聚焦 => 显示如第 1 步
步骤 4：用户单击保存按钮。我们仍然存储完整编号的数据

例如：用户输入 23.33324 => 焦点外，输入时显示为 23.3 => 焦点内 => 23.33324 => 将数据保存到 db => 23.33324

如何在 angualr 10 中做到这一点（使用 formgroup）？谢谢。

【问题讨论】：

标签： angular

【解决方案1】：

即使没有输入也存在 FormControl，因此您可以使用 [ngModel] (ngModelChange)

声明一个空的布尔数组 (*)

focus:boolean[]=[]

并使用一些类似：

<form [formGroup]="myform">
  <input style="text-align:right"
  [ngModel]="focus[0]?myform.get('control').value:(+myform.get('control').value).toFixed(2)"
  (ngModelChange)="myform.get('control').setValue($event)"
  [ngModelOptions]="{standalone:true}"
  (focus)="focus[0]=true" (blur)="focus[0]=false">
</form>

更新您还可以使用 angular formatNumber 函数（使用管道编号的函数）“格式化数字”。只需创建一个函数格式

  import {formatNumber} from '@angular/common'
  format(number:number)
  {
    return formatNumber(number,'en-US','0.2-2')
  }

并将输入中的[ngModel]替换为

[ngModel]="focus[1]?myform.get('control2').value:format(+myform.get('control2').value)"

见stackblitz

(*)我想你有几个“输入”，所以其中一个使用focus[0]，另一个使用focus[1]...

【讨论】：

我正在使用 formControlName 。当焦点或不集中时，它总是会获得最新的价值
“键”不是使用formControlName，使用[ngModel]来改变FormControl的值

【解决方案2】：

可重用且最好的方法是创建您自己的自定义 FormControl，即。实现ControlValueAccessor 的组件。文档：https://angular.io/api/forms/ControlValueAccessor

那里也有很多教程。

【讨论】：