CODEWITHSUNDEEP
angularhtml-inputangular-pipeangular2-ngmodel
Mahendra Waykos
Mahendra Waykos

Reputation: 677

Angular 4 - How to use currency pipe in input type

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

Upvotes: 14

Views: 61772

Answers (3)

oz1985oz
oz1985oz

Reputation: 417

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

Upvotes: 3

user8234365
user8234365

Reputation: 231

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.

Upvotes: 23

MateuszWkDev
MateuszWkDev

Reputation: 515

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

Upvotes: 6

Related Questions