Question

This question是关于在用户将数据输入到类型编号的输入时限制/验证输入。

我遇到的问题是，当模型首次加载时，任何整数或1dp的数字都只用1dp渲染。例如40或40.0都显示为40.0（不是40.00）。

我添加了此代码，以便在用户键入新值后，显示为2dp：

在模板文件中：

True

在组件文件中：

(change)="setTwoNumberDecimal($event)"

这可以在用户更改值后显示2dp 。

我尝试编写一个指令，当数据最初加载时应格式化为2dp，但是虽然该指令触发，但它不会将值更改为2dp。

setTwoNumberDecimal($event) { $event.target.value = parseFloat($event.target.value).toFixed(2); }

仅供参考，评论的渲染线不起作用（错误：setAttribute无法识别） - 这是尝试与平台无关。

所以问题是：如何让输入以2dps呈现其初始值？

Answer 1

模板表单

对此的解决方案是使用内置的DecimalPipe（奇怪的称为数字），而不是对模型值使用双向绑定 - 即。从 [（ngModel）] 到 [ngModel]和（ngModelChange）

    <input type="number" step="0.01" 
            (change)="setTwoNumberDecimal($event)"
            (ngModelChange)="item.value=$event"
            [ngModelOptions]="{updateOn: 'blur'}"
            [ngModel]="setting.decimal_value | number:'1.2-2'">

有关拆分[（）]绑定的详细信息，请参阅this question。

另请注意，只有当用户离开控件（模糊）时才会触发更新，否则每次键入内容时都会更新，这将是令人沮丧的用户体验（感谢@Mihail的评论）。

反应表单

回应评论中的问题： “这可以用于反应形式吗？”

答案是：

不，使用具有反应形式的管道更复杂。您可以仅使用管道来显示值，例如

 <p>{{form.get('name').value | myPipe}}</p>

但我认为正确的方法是使用值访问器。更多信息here。

Answer 2

Number.toFixed（x）格式化任何数字作为尾随小数的“ x”个数字。将数字四舍五入，如果需要创建所需的十进制长度，则在小数点后使用“ 0”。在模板中，我们可以格式化值并验证值

value1 = 0
value2 = 0.0

<p>
  {{value1.toFixed(2)}} - shows 0.00
  {{value2.toFixed(2)}} - shows 0.00
</p>

Angular 4 - 如何为type =＆＃39;输入＆＃39;呈现2个小数位？

2 个答案: