Angular 5 模板驱动的十进制输入

Question

我正在使用 Angular 5 模板驱动的表单，并且在一个表单中有多个数字输入。

我的要求很简单，我很惊讶我找不到解决方案

基本上每个数字输入都应显示为带有千位分隔符和可配置的小数位数的小数，但将值作为数字(无逗号)存储在模型中。

我查看了不适用的管道，因为它们仅用于显示并且不适用于双向绑定(bind)我还上下搜索了一个指令示例，该指令通过公开控件的 NgModel 并操纵其数据来执行此操作，但也没有任何乐趣。

我看过 TypeScript 中的一种绑定(bind)方式 + setter，但那很丑陋且不可重用

<input type="number" [NgModel]="somevalue | number : '2.2-6'" (ngModelChange)="somevalue = formatNumber($event)"

你能给我指出正确的方向吗？我认为指令是要走的路，但我找不到一个清晰的例子来说明如何将输入绑定(bind)与显示分开，重要的是如果数据已经填充在模型中，则在加载时显示正确的值

提前致谢!

Answer 1

Jeto 为我提供了 90% 的解决方案，并通过一些调整，设法获得了我想要的确切行为

我关注了This article并进入该字段正确显示的状态，但它始终显示截断值。我真正想要的是一个纯粹的“掩码”，这样用户可以提供超过 2dps，但为了清晰起见只能看到 2dps，并且鼠标悬停以显示整个图形。

然后我使用了 This article在指令中公开 NgModel，以便在焦点上显示 ngModel.viewmodel 的原始值而不是截断值

我的指令现在看起来像这样(为清楚起见，去掉管道。它是目前第一篇文章的剪切和粘贴)

import { Directive, Input, HostListener, ElementRef, OnInit } from "@angular/core";
import { NgModel } from "@angular/forms";
import { DecimalPipe } from "./decimal-pipe";


    @Directive({
        selector: "[decimalFormatter][ngModel]",
        providers: [NgModel]
    })
    export class DecimalFormatterDirective implements OnInit {

        private el: HTMLInputElement;
        @Input('decimals') decimals: number;

        constructor(
            private elementRef: ElementRef,
            private decimalPipe: DecimalPipe,
            private ngModel: NgModel
        ) {
            this.el = this.elementRef.nativeElement;
        }

        ngOnInit() {

            if (this.decimals == null)
                this.decimals = 2;

            console.log(this.el);
            console.log(this.ngModel);

            this.el.value = this.decimalPipe.transform(this.el.value, this.decimals);
        }

        @HostListener("focus", ["$event.target.value"])
        onFocus(value) {
            console.log(this.el);
            console.log(this.ngModel);
            this.el.value = this.ngModel.viewModel; // opossite of transform
        }

        @HostListener("blur", ["$event.target.value"])
        onBlur(value) {
            console.log(this.el);
            console.log(this.ngModel);
            this.el.value = this.decimalPipe.transform(value, this.decimals);
        }

    }

编辑:小更新

我将它调用的管道从第一篇文章中的管道更改为 Angular 使用的实际数字管道，因此它现在更像是 Angular 管道的包装器，可用于双向绑定(bind)。您还可以传入 Angular 数字格式样式，例如 2.2-6

希望这可以帮助将来遇到同样问题的人!

指令:

import { Directive, Input, HostListener, ElementRef, OnInit } from "@angular/core";
import { NgModel } from "@angular/forms";
import { DecimalFormatPipe } from "./decimal-format-pipe";


    @Directive({
        selector: "[decimalFormatter][ngModel]",
        providers: [NgModel]
    })
    export class DecimalFormatterDirective implements OnInit {

        private el: HTMLInputElement;
        @Input('decimals') decimals: string;

        constructor(private elementRef: ElementRef,
            private ngModel: NgModel,
            private decimalFormatPipe: DecimalFormatPipe) {

            this.el = this.elementRef.nativeElement;

        }

        ngOnInit() {

            if (this.decimals == null)
                this.decimals = "2.0-6";


            console.log(this.el.value, this.decimals);
            this.el.value = this.decimalFormatPipe.transform(this.el.value, this.decimals);
        }

        @HostListener("focus", ["$event.target.value"])
        onFocus(value) {

            console.log(this.el.value, this.decimals);
            this.el.value = this.ngModel.viewModel; //Display the raw value on the model
        }

        @HostListener("blur", ["$event.target.value"])
        onBlur(value) {

            console.log(this.el.value, this.decimals);
            this.el.value = this.decimalFormatPipe.transform(this.el.value, this.decimals);
        }

    }

管道包装器

import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core'
import { DecimalPipe } from '@angular/common';

@Pipe({ name: 'decimalFormatPipe' })
export class DecimalFormatPipe implements PipeTransform {

    constructor(@Inject(LOCALE_ID) private locale: string) {}

    transform(value: any, args: string) {
        let pipe = new DecimalPipe(this.locale);
        return pipe.transform(value, args);
    }
}

以及在输入上的用法

<input #myNumberInputCtrl="ngModel"
       name="myNumberInput"
       spellcheck="false" 
       placeholder="Enter a Number.." 
       [(ngModel)]="myNumberModel" 
       required 
       decimalFormatter
       [decimals]="'0.0-6'"
 />