Angular 4 - 如何在输入类型中使用货币管道答案

【问题标题】：Angular 4 - How to use currency pipe in input typeAngular 4 - 如何在输入类型中使用货币管道
【发布时间】：2018-06-27 13:03:39
【问题描述】：

我有一个 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)">

以上代码导致如下错误。

错误错误：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 [as handleEvent] (LandingPageComponent.html:38)
在handleEvent (core.es5.js:12014)
在 callWithDebugContext (core.es5.js:13475)
在 Object.debugHandleEvent [as handleEvent] (core.es5.js:13063)
在 dispatchEvent (core.es5.js:8607)
在 core.es5.js:9218

【问题讨论】：

为什么在 $event 周围有 ()？尝试不使用。
我认为这并不重要，就像你在没有 () 的情况下使用一样

标签： angular html-input angular-pipe angular2-ngmodel

【解决方案1】：

以下是货币管道的效果：

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

基本上使用 ngModelOptions 更新模糊允许在输入字段中键入时不添加 0。

【讨论】：

imo 这是最干净和最简单的解决方案

【解决方案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);
  }

【讨论】：

这个几乎可以工作，但是如果你真的在浏览器中运行它，它会有意想不到的行为，这是因为CurrencyPipe添加了额外的@987654325 @'s 立即开始，然后开始添加新数字。
你有哪个版本的angular？
这不适用于任何版本，这是您使用 CurrencyPipe 的方法的问题，而不是 Angular。查看此链接中的第二个输入：stackblitz.com/edit/angular-clr8se
嗨 vincecampanale，我正在使用 Angular 4

【解决方案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));
}

【讨论】：