web-dev-qa-db-fra.com

Comment obtenir le montant converti en valeur de tuyau de devise après avoir reçu un message d'erreur dans angular8

j'utilise le tuyau de change en cas de flou. Mais cela fonctionne bien pour la première fois, lorsque j'obtiens un message d'erreur de validation, si je supprime quelques chiffres et que je sors, il ne sera pas formaté au format monétaire reste dans le format que l'utilisateur a supprimé. Par exemple, j'ai donné ce numéro: 36543265 donc quand je suis sorti de l'entrée, il est formaté en $36,543,265.00, avec le message d'erreur de validation. Donc, si je supprime 265.00 de $36,543,265.00, j'ai toujours le message de validation d'erreur. donc le message d'erreur de validation s'est déclenché et est resté avec ce format $36,543 mais il n'est pas venu au bon format. Comment puis-je le faire au format de canal de devise approprié de USD, après avoir effacé le message de validation.

Comment puis-je le mettre en forme correctement en fonction de la suppression des valeurs par l'utilisateur.

TS:

public transformAmount(element, name) {
  if (name == "amount") {
    let formattedAmount = this.currencyPipe.transform(this.eoInfoForm.value.amount, 'USD');
    element.target.value = formattedAmount;
    this.eoInfoForm.get('amount').setValue(formattedAmount);
    if (this.eoInfoForm.get('amount').status === 'VALID') {
      this.amt = false; 
    } 
    else {
      this.amt = true;
    } 
  } 
}

HTML:

 <input type="text" class="form-control" placeholder="Amount in dolars"
                    formControlName="amount" autocomplete="off" maxlength="8" allowNumberOnly (blur)="transformAmount($event,'amount')" [ngClass]="{ 'is-invalid': amt  && eoInfo.amount.invalid }">
                    <div *ngIf="amt && eoInfo.amount.invalid" class="invalid-feedback">
                        <div *ngIf="amt && eoInfo.amount.invalid">Maximum of 8 characters including $ is allowed</div>
                      </div>

DÉMO: DÉMO

angularcurrency-pipe
5
Bhrungarajni

Vous avez une erreur avec votre code après avoir inséré le signe $ enter image description here

Vous pouvez utiliser cette expression régulière pour ne prendre que des nombres du texte

var thenum = thestring.replace( /^\D+/g, ''); // replace all leading non-digits with nothing

ou vérifiez simplement que le premier caractère et si c'est $ supprimez-le

0
Oded BD

J'ai changé certaines choses dans votre code afin de le faire fonctionner: Solution de travail

Voici la partie principale:

public transformAmount(name) {
    let formattedAmount = this.currencyPipe.transform(
        this.eoInfoForm.value.amount.replace(/[^\d.E+]/gm, ""),
        "USD"
    );
    this.eoInfoForm.get(name).setValue(formattedAmount);
}

Ce que j'ai fait, c'est inverser la transformation du tuyau sur la valeur avant de la renvoyer au tuyau. J'ai utilisé le /[^\d.E+]/gm expression régulière pour supprimer tout ce qui n'est pas inclus dans:

  • Nombre
  • Caractère de point
  • Caractère "E"
  • caractère "+"

Le "E" et le "+" servent à gérer un cas particulier lorsque le nombre est très grand et s'affiche comme $1.00E+37.

J'ai supposé que la longueur maximale de 8 est applicable lorsque le texte a été formaté, donc je ne l'ai pas touché (sinon vous avez besoin d'un validateur personnalisé). Je viens de le déplacer dans le fichier TypeScript car vous utilisez des formulaires réactifs, il est donc préférable de ne pas mélanger les concepts de formulaires modèles.

0
Guerric P

Première chose que je veux souligner:

Tu utilises maxlength="8" ce qui est bien jusqu'à ce que vous commenciez à utiliser le tube de devises. Les caractères ajoutés par votre pipe de devises seront pris en compte. Je ne sais pas si c'est un comportement recherché, mais ce n'est certainement pas intuitif du point de vue de l'utilisateur.

"Je vois une limite de 8 caractères, je peux saisir jusqu'à 8 caractères" - est la première chose à laquelle je pense en lisant le message de validation. Je ne veux pas avoir à penser au formatage de la devise moi-même pendant que je saisis mon numéro non formaté (à l'époque).

Je dirais que soit le maxLength 14 (8 + 1 signe dollar + 2 virgules + 1 point + deux chiffres est le nombre maximum possible pour USD = 14 caractères) et laissez le message de validation comme valeur 8. Ou si vous ne voulez vraiment que 8 caractères après le formatage, définissez la valeur du message de validation comme 3 (3 + 1 signe dollar + 1 virgule + 1 point + deux chiffres = 7) ayant 4 chiffres va à 9 caractères après le formatage car le chiffre supplémentaire + une virgule est ajoutée, allant à 9 caractères, ce qui est plus que maxLength 8.

Vous pouvez également utiliser une validation personnalisée pour la longueur et vérifier correctement vous-même (ce qui est bien si le format de la devise peut varier) au lieu de vous fier au générique *ngIf="amt && eoInfo.amount.invalid"

Maintenant, pour votre problème réel, une solution que je pense serait sympa est de supprimer le formatage lors de l'édition. Il n'est jamais vraiment pratique pour un utilisateur de modifier et de naviguer dans ., et $ quand tout ce qui leur importe lors de l'édition, ce sont vraiment les nombres. Vous pouvez créer un "tuyau de change inversé" lorsque l'utilisateur focalise le champ de sorte qu'il ne voit que le nombre.

J'ai fait une fourchette rapide de votre démo Stackblitz en supposant que la longueur maximale se réfère au nombre de chiffres avant la virgule décimale.

Faites-moi savoir si quelque chose doit changer et si cela aide à résoudre votre problème.

0
Jojofoulk