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

我有一个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:''对于管道'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 /在handleEvent的object.eval [as handleEvent](LandingPageComponent.html:38)处登陆页面/ landing-page.component.ts.LandingPageComponent.transformAmount(landing-page.component.ts:54)(core.es5.js: 12014)在callWedDebugContext(core.es5.js:13475)的Object.debugHandleEvent [as handleEvent](core.es5.js:13063)at dispatchEvent(core.es5.js:8607)at core.es5.js:9218

回答(2)

3 years ago

我认为这是一个解决方案:

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

然后在你的控制器中 . 输入值中的货币标记:

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

3 years ago

以下是使用货币管道的方法:

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

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