title: Angular 4 - How to use currency pipe in input type
body: <p>I have an HTML input:</p>
  
  <pre><code>&lt;input [(ngModel)]="item.value" name="inputField" type="text" /&gt;
  </code></pre>
  
  <p>I want to format its value and use an existing pipe:</p>
  
  <pre><code>.... [(ngModel)]="item.value | currency:'USD':true" .....
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;input type="text" 
     [ngModel]="item.value | currency:'USD':true" 
     (ngModelChange)="item.value=($event)"&gt;
  </code></pre>
  
  <p>The above code leads to following error.</p>
  
  <blockquote>
    <p>ERROR Error: InvalidPipeArgument: '' for pipe 'CurrencyPipe'<br>
        at invalidPipeArgumentError (common.es5.js:2610)<br>
        at formatNumber (common.es5.js:3176)<br>
        at CurrencyPipe.webpackJsonp.../../../common/@angular/common.es5.js.CurrencyPipe.transform (common.es5.js:3350)<br>
        at LandingPageComponent.webpackJsonp.../../../../../src/app/guest-handling/landing-page/landing-page.component.ts.LandingPageComponent.transformAmount (landing-page.component.ts:54)<br>
        at Object.eval [as handleEvent] (LandingPageComponent.html:38)<br>
        at handleEvent (core.es5.js:12014)<br>
        at callWithDebugContext (core.es5.js:13475)<br>
        at Object.debugHandleEvent [as handleEvent] (core.es5.js:13063)<br>
        at dispatchEvent (core.es5.js:8607)<br>
        at core.es5.js:9218  </p>
  </blockquote>