Angular - 避免 [(ngModel)] 数字输入字段的科学记数法答案

【问题标题】：Angular - Avoid scientific notation for [(ngModel)] number input fieldAngular - 避免 [(ngModel)] 数字输入字段的科学记数法
【发布时间】：2021-04-09 16:02:17
【问题描述】：

在一个应用程序中，我使用编辑字段来显示和修改 satoshi（例如：0.00000004）。

此字段通过[(ngModel)] 链接到数据模型。数据类型是数字。

Angular（或者更确切地说是 javascript 或 html）在加载时以科学计数法系统地翻译它：（例如：4e-8）

使用的字段类型“text”或“number”产生相同的效果。

有没有一种奇特的方法来强制使用不科学的符号将字段绑定到数据模型并且不更改数据模型？

问题的简单 javascript 示例：

const elText = document.getElementById("satoshiText");
const elNumber = document.getElementById("satoshiNumber");
elText.value =0.00000001;
elNumber.value =0.00000001;

<input id="satoshiText" type="text" /><br /><br />
<input id="satoshiNumber" type="number" />

【问题讨论】：

标签： javascript angular input number-formatting

【解决方案1】：

如果你单独指定值和事件绑定而不是使用双向绑定，你可以添加一个管道来格式化数字：

<input [ngModel]="value | number:'1.8-8'" (ngModelChange)="value = $event">

如果您经常需要，您还可以编写一个自定义表单组件，其ControlValueAccessor 转换为所需的格式。

【讨论】：

几乎完美。一个小改编，我改成'number:1.0-8'