Angular2 ngModelを適用した後の入力値のフォーマット

Question

入力値を通貨形式にフォーマットする指令を作成しようとしています。

私はフォーカスとぼかしで何をしなければならないのですか？ngOnInitフック（と他のフック）では、input要素にまだ値が適用されていません。

入力値を「監視」し、初期値が適用されたときにどのようにフォーマットするのですか？ここで

は私のディレクティブです：

テンプレートで

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

一つの可能​​性は、正しい形式にフィールドを変えていくゲッター/セッターメソッドにバインドすることです次のように変更後に元の形式に戻します。

typecript：

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" />