Angulaire 4 - Comment faire pour utiliser la monnaie pipe au type d'entrée

J'ai une entrée HTML:

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

Je veux formater sa valeur et utiliser un tuyau existant:

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

Aussi je suis en train de l'utiliser de la manière suivante, mais il me fait souhaitable de sortie pour la première fois et montrant 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 ci-dessous.

Erreur ERREUR: InvalidPipeArgument: "pour tuyau 'CurrencyPipe'

au invalidPipeArgumentError (communs.es5.js:2610)

au formatNumber (communs.es5.js:3176)

au CurrencyPipe.webpackJsonp.../../../common/@angular/common.es5.js.CurrencyPipe.transform (communs.es5.js:3350)

au LandingPageComponent.webpackJsonp.../../../../../src/app/guest-handling/landing-page/landing-page.component.ts.LandingPageComponent.transformAmount (de la page de destination.composante.ts:54)

à l'Objet.eval [comme handleEvent] (LandingPageComponent.html:38)

au handleEvent (de base.es5.js:12014)

au callWithDebugContext (de base.es5.js:13475)

à l'Objet.debugHandleEvent [comme handleEvent] (niveau de base.es5.js:13063)

au dispatchEvent (de base.es5.js:8607)

au cœur.es5.js:9218

  • Pourquoi l' (ne) autour de $event? Essayez sans.
  • Je ne pense pas que les questions sont les mêmes que vous utilisez sans ()
InformationsquelleAutor Mahendra Waykos | 2018-01-18
  1. 8

    Voici ce qu'a très bien fonctionné avec la devise de la pipe:

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

    Essentiellement l'aide de la ngModelOptions de mise à jour sur le flou permet le 0 à ne pas être ajoutée lors de la saisie dans le champ de saisie.

    • imo c'est la plus propre et la solution la plus simple
    InformationsquelleAutor user8234365
  2. 4

    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 contrôleur. Monnaie de marque à partir de la valeur en entrée:

      currencyInputChanged(value) {
    var num = value.replace(/[$,]/g, "");
    return Number(num);
  }
    • Ce presque fonctionne, mais si vous avez réellement l'exécuter dans le navigateur, il a un comportement inattendu, qui est due à le fait que la CurrencyPipe ajoute le supplément 0s'immédiatement, puis commence à en ajouter de nouveaux numéros.
    • la version angulaire avez-vous?
    • Cela ne peut pas fonctionner avec n'importe quelle version, c'est un problème avec votre approche à l'aide de CurrencyPipe, pas Angulaire. Découvrez la deuxième entrée dans ce lien: stackblitz.com/edit/angular-clr8se
    • Hey vincecampanale, je suis en utilisant Angulaire 4
    InformationsquelleAutor MateuszWkDev