Angular 4 - 如何为 type='input' 渲染 2 个小数位 [英] Angular 4 - how to render 2 decimal places for type='input'

问题描述

这个问题是关于限制/验证输入当用户将数据输入到类型为 number 的输入中时.

This question is about restricting/validating the input when the user enters data into an input of type number.

我遇到的问题是，当模型第一次加载时，任何整数或 1dp 的数字都只会以 1dp 呈现.例如，40 或 40.0 都显示为 40.0(而不是 40.00).

The issue I have is that when the model first loads, any numbers that are integers or 1dp, get rendered with only 1dp. eg 40 or 40.0 both show as 40.0 (not as 40.00).

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

I have added this code so that after a user types a new value, it shows with 2dp:

在模板文件中:

(change)="setTwoNumberDecimal($event)"

在组件文件中:

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

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

This works to show 2dp after the user changes the value.

我尝试编写一个指令，该指令在数据最初加载时应格式化为 2dp，但尽管该指令确实触发了，但它并没有将值更改为 2dp.

I tried to write a directive that should format to 2dp when the data initially loads, but although the directive does fire, it does not change the value to 2dp.

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive ({
  selector: '[fbDecimalFormat]'
})

export class DecimalFormatDirective {

  constructor(private el: ElementRef,
              private renderer: Renderer2) {
    //renderer.setAttribute(el, 'value', parseFloat(el.nativeElement.value).toFixed(2));
    this.el.nativeElement.value = parseFloat(this.el.nativeElement.value).toFixed(2);
  }

}

仅供参考，注释的渲染行不起作用(错误:setAttribute 无法识别) - 这是一种独立于平台的尝试.

FYI the commented render line did not work (error: setAttribute not recognised) - it was an attempt to be platform independent.

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

So the question is: How can I get the input to render its initial value with 2dps?

推荐答案

模板表单

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

The solution to this was to use the built-in DecimalPipe (weirdly called number) and not use two-way binding for the model value - ie. from [(ngModel)] to [ngModel] and (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'">

查看这个问题了解更多有关拆分 [()] 绑定的信息.

See this question for more info on splitting the [()] binding.

另请注意，更新仅在用户离开控件(模糊)时触发，否则每次输入内容时它都会更新，这将是一个令人沮丧的用户体验(感谢@Mihail 的评论).

Notice also that the update fires only when the user leaves the control (blur) otherwise every time they type something it will update, which will be a frustrating UX (thanks to @Mihail's comment).

反应式

针对评论中的问题:这也可以与反应式一起使用吗?"

答案是:

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

No, using pipes with reactive forms is more complicated. You could use the pipe merely to display the value, like

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

但我认为正确的方法是使用值访问器.更多信息请此处.

but I think the correct way is to use value accessor. More info here.

这篇关于Angular 4 - 如何为 type='input' 渲染 2 个小数位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！