应用 Angular2 ngModel 后格式化输入值答案

【问题标题】：Format input value after Angular2 ngModel is applied应用 Angular2 ngModel 后格式化输入值
【发布时间】：2017-03-12 09:11:37
【问题描述】：

我正在尝试创建一个指令，将输入值格式化为货币格式。

我能够在焦点和模糊上做我必须做的事情，并且在 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);
  }
}

【问题讨论】：

标签： angular angular2-directives

【解决方案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>

【讨论】：

我应该提到我已经尝试了所有生命周期钩子，但我总是得到空值。

【解决方案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"  />

【讨论】：

【解决方案3】：

在我的指令中，我应用了这篇文章中提到的解决方案：

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

它对我有用。

查看我的帖子：Directive display ng-model input value as currency in angular

【讨论】：