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
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.