Formatage de la valeur d'entrée après l'application du ngModel Angular2

Question

J'essaie de créer une directive qui formatera la valeur d'entrée dans un format monétaire.

Je peux faire ce que j'ai à faire sur focus et sur blur, et dans le hook ngOnInit (et tout autre hook), l'élément input n'a pas encore de valeurs appliquées à lui.

Comment puis-je "surveiller" la valeur de l'entrée et la formater lorsque sa valeur initiale est appliquée ?

Voici ma directive :

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));
      }
    })
  }

Dans votre modèle :

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

Answer 2

Une possibilité consiste à se lier à une méthode getter/setter qui transformera le champ au format correct, puis le renverra au format d'origine après modification, comme suit

tapuscrit :

 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);
  } 

et dans la vue des composants

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

Answer 3

Sur ma directive, j'ai appliqué la solution mentionnée dans ce billet :

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

et cela fonctionne pour moi.

Voir mon article : Directive pour l'affichage de la valeur de l'entrée ng-model en tant que devise dans angular