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

问题描述

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

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.

还请注意，只有在用户离开控件(模糊)时才会触发更新，否则每次他们键入内容时都会更新，这将是令人沮丧的UX(感谢@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).

活动表格

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

In response to the question in the comments: "Could this be used with reactive forms as well?"

答案是:

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

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屋！