Format input value after Angular2 ngModel is applied

Question

I am trying to create a directive that will format the input value to a currency format.

I am able to do what I have to do on focus and on blur, and in the ngOnInit hook (and any other hook), the input element does not yet have any values applied to it.

How do I "watch" for the input's value, and format it when it's initial value is applied?

Here is my 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);
  }
}

Bazinga · Accepted Answer · 2016-10-30 16:17:50Z

1

  ngAfterContentInit() {

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

In your template:

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

edited Oct 30, 2016 at 16:17

answered Oct 30, 2016 at 8:34

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

justinledouxweb Over a year ago

I should have mentioned that I have tried all lifecycle hooks, and I always get empty value.

Daryl1976 · Accepted Answer · 2017-09-20 19:29:07Z

1

One possibility is to bind to a getter/setter method that will transform the field to the correct format, and then return it back to the original format after it is modified, as per below

typescript:

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

and in the component view

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

answered Sep 20, 2017 at 19:29

Daryl1976

7552 gold badges10 silver badges20 bronze badges

Comments

Andre Hofmeister · Accepted Answer · 2018-04-19 09:34:30Z

0

On my directive I have applied the solution mentioned in this post:

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

and it works for me.

See my Post : Directive display ng-model input value as currency in angular

edited Apr 19, 2018 at 9:34

Andre Hofmeister

3,45511 gold badges55 silver badges80 bronze badges

answered Apr 19, 2018 at 8:43

Saima Gul

998 bronze badges

Collectives™ on Stack Overflow

Format input value after Angular2 ngModel is applied

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related