web-dev-qa-db-fra.com

Angular 4 - Comment utiliser le canal monétaire dans le type d'entrée

J'ai une entrée HTML:

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

Je souhaite formater sa valeur et utiliser un tube existant:

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

J'essaie également de l'utiliser de la manière suivante, mais cela me donne une sortie souhaitable pour la première fois et affiche une erreur lors de la mise à jour du champ:

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

Le code ci-dessus conduit à l'erreur suivante.

ERREUR Erreur: InvalidPipeArgument: '' pour le canal 'CurrencyPipe'
sur invalidPipeArgumentError (common.es5.js: 2610)
au formatNumber (common.es5.js: 3176)
sur CurrencyPipe.webpackJsonp .../../../common/@angular/common.es5.js.CurrencyPipe.transform (common.es5.js: 3350)
sur LandingPageComponent.webpackJsonp .../../../../../src/app/guest-handling/landing-page/landing-page.component.ts.LandingPageComponent.transformAmount (landing -page.component.ts: 54)
sur Object.eval [comme handleEvent] (LandingPageComponent.html: 38)
à handleEvent (core.es5.js: 12014)
sur callWithDebugContext (core.es5.js: 13475)
sur Object.debugHandleEvent [comme handleEvent] (core.es5.js: 13063)
sur dispatchEvent (core.es5.js: 8607)
at core.es5.js: 9218

angularhtml-inputangular-pipeangular2-ngmodel
8
Mahendra Waykos

Voici ce qui a très bien fonctionné avec le tuyau de devise:

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

Fondamentalement, l'utilisation des ngModelOptions pour mettre à jour le flou permet de ne pas ajouter les 0 lors de la saisie dans le champ de saisie.

8
user8234365

Je pense que c'est une solution pour vous:

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

Et puis dans votre manette. Marque de devise à partir de la valeur en entrée:

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