Angular 4 - 如何在輸入類型中使用貨幣管道

Question

我有一個 HTML 輸入：

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

我想格式化它的值並使用現有的管道：

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

此外，我試圖通過以下方式使用它，但它第一次為我提供了理想的輸出，並在更新字段時顯示錯誤：

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

上面的代碼導致以下錯誤。

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

Answer 1

以下是與貨幣管道配合得很好的方法：

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

基本上使用 ngModelOptions 更新模糊允許在輸入字段中輸入時不添加 0。

Answer 2

我認為這是適合您的解決方案：

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

然后在您的控制器中。 貨幣標記來自輸入值：

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

Answer 3

我認為您需要將一些答案與這樣的小改動結合起來 -

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