web-dev-qa-db-fra.com

Angular2 montre deux décimales en entrée

J'ai une application angular2 qui doit montrer TOUJOURS deux décimales en entrée après quelques calculs. Mais bien que dans le composant, je force à avoir deux décimales, dans l'entrée, il le montre avec zéro décimale, un décimal ou les décimales que le nombre a, mais ce dont j'ai besoin est de toujours en afficher deux.

Dans le contrôleur je force à avoir deux décimales de cette façon

return +(this.getCost() * this.getQuantity()).toFixed(2);

Mais quand je montre cela, le résultat peut avoir une taille décimale différente

<input name="number" pattern="^[0-9]+(\.[0-9]{1,2})?" step="0.01" formControlName="number" type="button" class="form-control" id="number" >

L'ajout de I; m à l'aide de TypeScript et le type de champ est un nombre (ce qui, à mon avis, est la cause de l'arrondi)

javascriptangulartypescript
6
Faabass

A la fin je n'ai pas trouvé la bonne réponse ...

Ce que j'ai fait était de créer la fonction suivante

fixDecimals(value : string){
    value = "" + value;
    value = value.trim();
    value = parseFloat(value).toFixed(2);
    return value;
  }

Et j'ai changé le type d'entrée en texte (au lieu de nombre).

Et j'appelle cette fonction dans ngOnInit, donc, je montre toujours le nombre avec décimales à l'utilisateur. La seule chose en suspens est que si l'utilisateur modifie la valeur et supprime les décimales, le nombre ne sera pas complété par le 00 correspondant.

J'ai essayé avec onChange, mais l'invite va à la fin de l'entrée (ce qui est très gênant pour l'utilisateur)

1
Faabass

Je vous suggère d'utiliser un masque sur le champ d'entrée. Il y a un paquet text-mask que j'ai déjà utilisé et qui fonctionne!

Remarque: jetez un oeil à votre type d’entrée HTML, vous avez dit que c’était un nombre, mais dans votre question le type est un bouton

Pour utiliser le package:

  1. Installer les paquets

    npm i angular2-text-mask text-mask-addons --save

  2. Importez-le dans votre fichier de module d'application

    import { TextMaskModule } from 'angular2-text-mask';

@NgModule({
  imports: [
    /* ... */
    TextMaskModule
  ]
  /* ... */
})
export class AppModule { }

  3. En toi composant.ts

    import createNumberMask from 'text-mask-addons/dist/createNumberMask';

@Component({   
  selector: 'app-my-component',   
  templateUrl: './my-component.html',   
  styleUrls: ['./my.component.scss'] }) 

  export class MyComponent implements OnInit { 
  public price = 0;

  private currencyMask = createNumberMask({
    prefix: '',
    suffix: '',
    includeThousandsSeparator: true,
    thousandsSeparatorSymbol: ',',
    allowDecimal: true,
    decimalSymbol: '.',
    decimalLimit: 2,
    integerLimit: null,
    requireDecimal: false,
    allowNegative: false,
    allowLeadingZeroes: false
  });

}

  4. Dans votre composant.html 

    <input type="text" [textMask]="{mask: currencyMask}" name="receivedName" id="received" class="form-control" maxlength="50" [(ngModel)]="price"/>
13
JuanDM

tl; dr; Option 1: renvoyer une chaîne, ne pas convertir en nombre. Option 2: Utilisez un nombre pipe.

toFixed renvoie une chaîne.

Vous convertissez le résultat de toFixed en un nombre

return +(this.getCost() * this.getQuantity()).toFixed(2);
       ↑

Lorsque vous convertissez "1.20" en un nombre, il "supprimera" le 0 supplémentaire renvoyant 1.2.

Pour afficher le résultat avec 2 décimales, vous pouvez renvoyer le résultat sous forme de chaîne afin que le 0 ne soit pas coupé, ou utiliser un tuyau.

Vous pouvez utiliser le nombre pipe

{{ 1.20 | number:'1.2-2' }}

Format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

  • minIntegerDigits est le nombre minimum de chiffres entiers à utiliser. La valeur par défaut est 1.
  • minFractionDigits est le nombre minimum de chiffres après la fraction. La valeur par défaut est 0.
  • maxFractionDigits est le nombre maximum de chiffres après la fraction. La valeur par défaut est 3.

Avec le tube, vous pouvez garder votre code renvoyant un nombre et il ne modifiera le format de la valeur que lorsque vous l'afficherez à l'écran.

6
BrunoLM

DecimalPipe

DecimalPipe est une API de pipe angulaire appartenant à CommonModule. DecimalPipe est utilisé pour formater un nombre en tant que nombre décimal selon les règles de localisation. Il utilise un mot clé numérique avec un opérateur de canal. Trouvez la syntaxe. 

number_expression | number[:digitInfo]

Enfin, nous obtenons un nombre décimal sous forme de texte. Trouvez la description. number_expression: expression angulaire qui donnera un nombre à la sortie. nombre: mot-clé de canal utilisé avec l'opérateur de canal. digitInfo: définit le format des nombres. 

Nous allons maintenant comprendre comment utiliser digitInfo. La syntaxe de digitInfo est la suivante. 

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Trouvez la description. 

minIntegerDigits : Minimum number of integer digits. Default is 1. 
minFractionDigits : Minimum number of fraction digits. Default is 0. 
maxFractionDigits : Maximum number of fraction digits. Default is 3.
0
Ali Shawky

Je ne sais pas si j'ai bien compris le problème, mais ce que j'ai compris, c'est que vous voulez forcer l'entrée à contenir deux chiffres après le nombre décimal. Voici un essai: Vous devez convertir le nombre en un type flottant et, comme vous le souhaitez, il doit être fixé à deux décimales à l’aide de la méthode toFixed.

Number.parseFloat(x).toFixed(2)
//Where x is the number which needs to be converted to a float type.

J'espère que ça aide.

0
MKant

Si votre entrée se trouve dans un formulaire avec le nom: inputForm e.g

HTML 

    <form [formGroup]="inputForm">
      <input name="number" (keyup)="fixNumber()" pattern="^[0-9]+(\.[0-9]{1,2})?" step="0.01" `enter code here`formControlName="number" type="button" class="form-control" id="number">
</form>

TS

public fixNumber(){

      let value =this.inputForm.get('number').value;
      let prefix:string = value.toString().split('.')[0];
      let suffix:string = value.toString().split('.')[1];
      if(suffix.length > 2){
        let suffix_subed = suffix.substr(0,2);
        let new_value = prefix+'.'+suffix_subed;
        this.inputForm.get('number').setValue(new_value);
      }
}

Vous pouvez obtenir des erreurs de journal, mais je pense que ce n’est pas une grosse affaire

0
Kostas Asargiotakis

Utilisez cette pipe

{{nombre | nombre: '1.2-2'}}

0
Ali Shawky

Dans angular 2 have DecimalPipe ceci sera utile pour votre besoin.Veuillez l'utiliser

Use format '3.2-5' : 

minIntegerDigits = 3 
minFractionDigits = 2 
maxFractionDigits = 5 

num = 12.324324

{{num1 | number:'3.2-5'}} 

012.63847
0
Sathiyaraj