Html Question posted in
Some basic documentation can be found here.

Html – Add each Input value In Cents Before Populating Dollars

I have an input field in angular and I am trying to make it work like an ATM. Basically, I want the first digit entered to be the decimal tens place, the second digit in decimal ones place, third digit in the units place, fourth in the tens place, fifth in the hundreds place and so on.

For example, if the user enters 10, that will change to .10, 530 would be 5.30, 7 would be .07, 3850 would be 38.50.

I could not get the currency pipe to work no matter what I tried and while doing research, I found something that works and does what I want but there is one issue. The following html input is what I have:

 <input *ngIf="selectedState === 'amount'" type=number step=0.01 class='name-input' id='priceEntry' name='priceEntry' placeholder="Enter Amount" (keyup)="onAmountChange($event)" [(ngModel)]="inputValue" oninput="this.value=parseInt(this.value.replace('.',''))/100">

The issue is, Although this works perfectly fine, the issue I am having is that once 0 is inserted, it does not increase the unit. In the above html, If I enter 100 it changes it to .1 and wont add the remainder zeros. Similarly, no matter how many times I add the zero is is not going past the decimal. Every other number works fine. Can someone help me on this? Is there something I am missing? Is there a better alternative to this?

Tags:

2

Answers


  1. 0

    When you input 100, parseInt(‘100’) becomes 100, and when divided by 100, it results in 1.00. However, if you input 0100, parseInt(‘0100’) becomes 64 in octal (base 8), not 100 as you might expect.

    <input *ngIf="selectedState === 'amount'" type="number" step="0.01" class="name-input" id="priceEntry"
  name="priceEntry" placeholder="Enter Amount" (input)="onAmountChange($event)"
  [(ngModel)]="inputValue" oninput="this.value = parseFloat(this.value.replace('.', ''))/100">
    Login or Signup to reply.
  2. 0

    You can try the below method, where we convert the value to string then process the value based on the length, we can split on the decimal and if the input is less than three, we can pad the lower length with zeros, to give the desired output

    NOTE: This is not failure free code, I hope you will take this reference and take your issue to closure!

    import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
     <input *ngIf="selectedState === 'amount'" type="text" step="0.01" class='name-input' id='priceEntry' name='priceEntry' placeholder="Enter Amount" [ngModel]="inputValue" (ngModelChange)="modelChange($event)">
  `,
})
export class App {
  selectedState = 'amount';
  name = 'Angular';
  inputValue: string | null = '';

  modelChange(event: any) {
    // if (parseFloat(event) === 0) {
    //   this.inputValue = '0.00';
    //   return;
    // }
    // convert to float to remove leading zeros
    const value = event ? parseFloat(event.replace('.', '')).toString() : '';
    if (value) {
      // check if the length is greater than 2 only then split to two sides of the decimal
      if (value.length > 2) {
        // split on two sides of the decimal, pad the right side alone with two decimals if necessary
        this.inputValue = value
          ? value.slice(0, -2) + '.' + value.slice(-2).padStart(2, '0')
          : value;
      } else {
        // here no need to split, so we just need to focus on right side of decimal
        // get the right side and pad with zero if needed to two decimals
        this.inputValue =
          value != '0' && value ? '.' + value.slice(-2).padStart(2, '0') : null;
      }
    } else {
      this.inputValue = '';
    }
  }
}

bootstrapApplication(App);

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search