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

Posted 2023-03-05

【中文标题】Angular 4 - 如何在输入类型中使用货币管道

【英文标题】：Angular 4 - How to use currency pipe in input type

【发布时间】：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 周围有 ()？尝试不使用。

我认为这并不重要，就像你在没有 () 的情况下使用一样

【参考方案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));