在應用Angular2 ngModel後格式化輸入值

Question

我正在嘗試創建一個將輸入值格式化爲貨幣格式的指令。

我能夠做我必須做的重點和模糊，並在ngOnInit鉤子（和任何其他掛鉤），輸入元素還沒有任何值應用於它。

如何「觀察」輸入值，並在初始值應用時對其進行格式化？

這裏是我的指令：

import { 
    Input, 
    Directive, 
    HostListener, 
    ElementRef, 
    Renderer, 
    OnInit 
} from '@angular/core'; 
import { NgModel } from '@angular/forms'; 
import { CurrencyPipe } from '@angular/common'; 

@Directive({ 
    selector: '[currencyInput]', 
    providers: [NgModel], 
    host: { 
    '(input)': 'onInputChange()' 
    } 
}) 
export class CurrencyInputDirective implements OnInit { 
    @Input() ngModel: number; 

    private elem: HTMLInputElement; 

    constructor(
    private el: ElementRef, 
    private render: Renderer, 
    private currencyPipe: CurrencyPipe, 
    private model: NgModel, 
) { 
    this.elem = el.nativeElement; 
    } 

    ngOnInit() { 
    this.elem.value = this.currencyPipe.transform(parseInt(this.elem.value), 'USD', true); 
    } 

    @HostListener('focus', ['$event.target.value']) 
    onFocus(value: string) { 
    this.elem.value = value.replace(/\,/g, ''); 
    } 

    @HostListener('blur', ['$event.target.value']) 
    onBlur(value: string) { 
    this.elem.value = this.currencyPipe.transform(parseInt(value), 'USD', true); 
    } 
} 

Answer 1

ngAfterContentInit() { 

    this.model.valueChanges.subscribe(value => { 
     if(value) { 
     const parsed = parseInt(value.replace('$', "")); 
     this.model.valueAccessor.writeValue(new CurrencyPipe().transform(parsed, 'USD', true)); 
     } 
    }) 
    } 

在模板：

<div> 
    <input type="text" currencyInput [ngModel]="initModel" name="number"/> 
</div> 

Answer 2

一種可能性是綁定到一個getter/setter方法，將現場轉換爲正確的格式，然後在修改後將其恢復爲原始格式，如下所示

打印稿：

AnnualRevenue: number; 
    get AnnualRevenueFormatted():string{ 
    return this.AnnualRevenue !== undefined ? `$${this.AnnualRevenue.toLocaleString()}`: '$0'; 
    } 

    // strip out all the currency information and apply to Annual Revenue 
    set AnnualRevenueFormatted(val: string) { 
    const revenueVal = val.replace(/[^\d]/g, ''); 
    this.AnnualRevenue = parseInt(revenueVal); 
    } 

，並在組件視圖

<input type="text" class="text-input" [(ngModel)]="accountInfo.AnnualRevenueFormatted" />