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

时间:2021-01-03 17:34:49

标签: javascript angular input number-formatting

在应用程序中,我使用编辑字段来显示和修改聪(例如: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" />

1 个答案:

答案 0 :(得分:2)

如果单独指定值和事件绑定而不是使用双向绑定,则可以添加管道来格式化数字:

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

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