Angular 4 - How to use currency pipe in input type

Question

I have an HTML input:

<input [(ngModel)]="item.value" name="inputField" type="text" />

I want to format its value and use an existing pipe:

.... [(ngModel)]="item.value | currency:'USD':true" .....

Also I'm trying to use it the following way, but it's giving me desirable output for the first time and showing error while updating the field:

<input type="text" 
   [ngModel]="item.value | currency:'USD':true" 
   (ngModelChange)="item.value=($event)">

The above code leads to following error.

ERROR Error: InvalidPipeArgument: '' for pipe 'CurrencyPipe'
at invalidPipeArgumentError (common.es5.js:2610)
at formatNumber (common.es5.js:3176)
at CurrencyPipe.webpackJsonp.../../../common/@angular/common.es5.js.CurrencyPipe.transform (common.es5.js:3350)
at LandingPageComponent.webpackJsonp.../../../../../src/app/guest-handling/landing-page/landing-page.component.ts.LandingPageComponent.transformAmount (landing-page.component.ts:54)
at Object.eval [as handleEvent] (LandingPageComponent.html:38)
at handleEvent (core.es5.js:12014)
at callWithDebugContext (core.es5.js:13475)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13063)
at dispatchEvent (core.es5.js:8607)
at core.es5.js:9218

Why the () around $event? Try without. – rrd Jan 18 '18 at 13:02 — rrd, Jan 18 '18 at 13:02
I think that's not matters is same as you use without () – Mahendra Waykos Jan 19 '18 at 05:49 — Mahendra Waykos, Jan 19 '18 at 05:49

score 22 · Answer 1 · edited Jan 04 '21 at 17:29

22

Here is what worked just fine with currency pipe:

<input
  matInput 
  type="text"
  placeholder="Test Price"
  [ngModel]="testPrice | currency:'USD':'symbol':'2.2'"
  [ngModelOptions]="{updateOn:'blur'}"
  (ngModelChange)="testPrice=$event"
/>

Basically using the ngModelOptions to update on blur allows for the 0s not to be added while typing in the input field.

edited Jan 04 '21 at 17:29

zwl

57
3
5

answered Jun 14 '18 at 16:41

user8234365

221
2
6

1

imo this is the cleanest and simplest solution – Mike Corcoran Feb 18 '19 at 16:06

score 6 · Answer 2 · answered Jan 18 '18 at 13:23

6

I think this is a solution for you:

<input type="text" 
   [ngModel]="item.value | currency:'USD':true" 
   (ngModelChange)="item.value=currencyInputChanged($event)">

And then in your controller. Currency mark in from value in input:

  currencyInputChanged(value) {
    var num = value.replace(/[$,]/g, "");
    return Number(num);
  }

answered Jan 18 '18 at 13:23

MateuszWkDev

505
6
9

3

This *almost* works, but if you actually run it in the browser, it has unexpected behavior, which is due to the fact that the `CurrencyPipe` adds the extra `0`'s immediately, then starts adding the new numbers. – vince Jan 18 '18 at 13:33
which version of angular do you have? – MateuszWkDev Jan 18 '18 at 13:41
1

This won't work with any version, it's a problem with your approach to using `CurrencyPipe`, not Angular. Check out the second input in this link: https://stackblitz.com/edit/angular-clr8se – vince Jan 18 '18 at 13:45
Hey vincecampanale, I am using Angular 4 – Mahendra Waykos Jan 19 '18 at 05:47

score 3 · Answer 3 · answered Jul 06 '21 at 08:33

I think you need to combine some answers with a little change like this -

HTML:

<input
  matInput 
  type="text"
  placeholder="Test Price"
  [ngModel]="testPrice | currency:'USD'"
  [ngModelOptions]="{updateOn:'blur'}"
  (ngModelChange)="updateCurrencyField($event)"
/>

TS:

updateCurrencyField(value: string): void {
  const onlyNumbers = value.replace(/[^\d.-]/g, '');
  this.valueChange.emit(Number(onlyNumbers));
}

Angular 4 - How to use currency pipe in input type

3 Answers3

Linked