html - Angular 6输入类型编号并在逗号后显示2位数字

Question

我想显示输入，当用户输入数字时:20 我想显示 20,00。对于更大的数字，我希望看到像 11 200,00 这样的千位分隔符。

<input type="number" (ngModelChange)="calculateSum()" (change)="calculateAmount(invoiceQuota)" [ngModel]="invoiceQuota.controls.grossAmount.value">

我尝试添加:

[ngModel]="invoiceQuota.controls.grossAmount.value | number:'1.2-2' 

但是没用

我找不到解决我的问题的方法。

Answer 1

    import { Component, Input, NgZone, OnInit, Pipe, PipeTransform } from '@angular/core';

const PADDING = '00';
@Pipe({
    name: 'floatNumber'

})
export class FloatNumnberPipe implements PipeTransform {
    DECIMAL_SEPARATOR: string;
    THOUSANDS_SEPARATOR: string;

    constructor() {
    // TODO comes from configuration settings
        this.DECIMAL_SEPARATOR = '.';
        this.THOUSANDS_SEPARATOR = ',';
    }

    transform(value: number | string, fractionSize: number = 2): string {
        const ds = '.';
        const ts = ',';
        let [integer, fraction = ''] = (value || '').toString()
            .split(ds);

        fraction = fractionSize > 0
            ? ds + (fraction + PADDING).substring(0, fractionSize)
            : '';

        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ts);
        integer = integer ? integer : '0';
        return integer + fraction;
    }

    parse(value: string, fractionSize: number = 3): string {
        const ds = '.';
        const ts = ',';
        let [integer, fraction = ''] = (value || '').split(ds);

        integer = integer.replace(new RegExp(ts, 'g'), '');

        fraction = parseInt(fraction, 10) > 0 && fractionSize > 0
            ? ds + (fraction + PADDING).substring(0, fractionSize)
            : '';
        integer = integer ? integer : '0';
        return integer + fraction;
    }
}
 this way you can write float number PIPE and in component ,  if (typeof modelControlname === 'string') {


modelControlname=Math.round(Number(FloatNumnberPipe.prototype.parse(amount)) * 100) / 100);

  modelControlname=FloatNumnberPipe.prototype.transform(modelControlname.value);