web-dev-qa-db-ja.com

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)">

上記のコードは次のエラーにつながります。

エラーエラー：InvalidPipeArgument： ''パイプ 'CurrencyPipe'の
at invalidPipeArgumentError（common.es5.js：2610）
formatNumber（common.es5.js：3176）
CurrencyPipe.webpackJsonp .../../../common/@angular/common.es5.js.CurrencyPipe.transform（common.es5.js：3350）
at 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で

angularhtml-inputangular-pipeangular2-ngmodel
8
Mahendra Waykos

通貨パイプでうまくいったのは次のとおりです。

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

基本的に、ngModelOptionsを使用してぼかしを更新すると、入力フィールドに入力するときに0を追加できなくなります。

8
user8234365

これはあなたのための解決策だと思います：

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

そして、コントローラーで。入力の値からの通貨記号：

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