Ensure that only numbers with a maximum of two decimal places are accepted in Angular 2 for input

Question

Ensure that only numbers with a maximum of two decimal places are accepted in Angular 2 for input

On my webpage, there are several input boxes where users can enter numbers. I need to prevent them from entering more than two decimal places.

Although I tried using the html 5 input Step="0.00", it didn't work as expected.

I am open to any TypeScript solutions as well.

validation angular typescript input

Answer 1

Answer №1

To see a demonstration of the directive below, click on this Plnkr link.

You can implement this functionality using the custom directive provided:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {
  elemRef: ElementRef

  constructor(private el: ElementRef) {
    this.elemRef = el
  }

  @Input() OnlyNumber: boolean;
  @Input() DecimalPlaces: string;
  @Input() minValue: string;
  @Input() maxValue: string;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      // Keycodes allowed for numbers and specific actions
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        (e.keyCode == 65 && e.ctrlKey === true) || 
        (e.keyCode == 67 && e.ctrlKey === true) || 
        (e.keyCode == 88 && e.ctrlKey === true) || 
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          return;
        }
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }

  @HostListener('keypress', ['$event']) onKeyPress(event) {
    let e = <any> event
    let valInFloat: number = parseFloat(e.target.value)
    
    if(this.minValue.length) {
      if( valInFloat < parseFloat(this.minValue) || (isNaN(valInFloat) && e.key === "0") ) {
        e.preventDefault();
      }
    }

    if(this.maxValue.length) {
      if(valInFloat > parseFloat(this.maxValue)) {
        e.preventDefault();
      }
    }

    if (this.DecimalPlaces) {
      let currentCursorPos: number = -1;
      
      let dotLength: number = e.target.value.replace(/[^\.]/g, '').length
      
      let decimalLength = e.target.value.split(".")[1] ? e.target.value.split(".")[1].length : 0;

      if( dotLength > 1 || (dotLength === 1 && e.key === ".") || (decimalLength > (parseInt(this.DecimalPlaces) - 1) && 
        currentCursorPos > e.target.value.indexOf(".")) && ["Backspace", "ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 ) {
        e.preventDefault();
      }
    }  
  }
}

The usage of HTML with this directive is demonstrated as follows:

<input type="text" OnlyNumber="true" DecimalPlaces="2" minValue="1.00" maxValue="999999999.00">

If you encounter any issues or bugs, please feel free to provide feedback in the comments section.

P.S: This directive builds upon improvements made to this answer for validating decimal points effectively.

Answer 2

To see a demonstration of the directive below, click on this Plnkr link.

You can implement this functionality using the custom directive provided:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {
  elemRef: ElementRef

  constructor(private el: ElementRef) {
    this.elemRef = el
  }

  @Input() OnlyNumber: boolean;
  @Input() DecimalPlaces: string;
  @Input() minValue: string;
  @Input() maxValue: string;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      // Keycodes allowed for numbers and specific actions
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        (e.keyCode == 65 && e.ctrlKey === true) || 
        (e.keyCode == 67 && e.ctrlKey === true) || 
        (e.keyCode == 88 && e.ctrlKey === true) || 
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          return;
        }
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }

  @HostListener('keypress', ['$event']) onKeyPress(event) {
    let e = <any> event
    let valInFloat: number = parseFloat(e.target.value)
    
    if(this.minValue.length) {
      if( valInFloat < parseFloat(this.minValue) || (isNaN(valInFloat) && e.key === "0") ) {
        e.preventDefault();
      }
    }

    if(this.maxValue.length) {
      if(valInFloat > parseFloat(this.maxValue)) {
        e.preventDefault();
      }
    }

    if (this.DecimalPlaces) {
      let currentCursorPos: number = -1;
      
      let dotLength: number = e.target.value.replace(/[^\.]/g, '').length
      
      let decimalLength = e.target.value.split(".")[1] ? e.target.value.split(".")[1].length : 0;

      if( dotLength > 1 || (dotLength === 1 && e.key === ".") || (decimalLength > (parseInt(this.DecimalPlaces) - 1) && 
        currentCursorPos > e.target.value.indexOf(".")) && ["Backspace", "ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 ) {
        e.preventDefault();
      }
    }  
  }
}

The usage of HTML with this directive is demonstrated as follows:

<input type="text" OnlyNumber="true" DecimalPlaces="2" minValue="1.00" maxValue="999999999.00">

If you encounter any issues or bugs, please feel free to provide feedback in the comments section.

P.S: This directive builds upon improvements made to this answer for validating decimal points effectively.

Answer 3

Answer №2

I successfully implemented a solution with the help of @pipe

import { Directive, Input, Inject, HostListener, ElementRef, OnInit } from "@angular/core";

const PADDING = "000000";

@Pipe({ name: "CurrencyPipe" })
export class CurrencyPipe implements PipeTransform {
  transform(value: any, args: string[]): any {
     var clean = value.replace(/[^-0-9\.]/g, '');
    var negativeCheck = clean.split('-');
    var decimalCheck = clean.split('.');
    
     if (negativeCheck[1] != undefined) {
                        negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                        clean = negativeCheck[0] + '-' + negativeCheck[1];
                        if (negativeCheck[0].length > 0) {
                            clean = negativeCheck[0];
                        }

                    }
        if (decimalCheck[1] != undefined) {
                        decimalCheck[1] = decimalCheck[1].slice(0, 2);
                        clean = decimalCheck[0] + '.' + decimalCheck[1];
                    }

    return clean;
  }

  parse(value: string, fractionSize: number = 2): string {

     var clean = value.replace(/[^-0-9\.]/g, '');
    var negativeCheck = clean.split('-');
    var decimalCheck = clean.split('.');
    
     if (negativeCheck[1] != undefined) {
                        negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                        clean = negativeCheck[0] + '-' + negativeCheck[1];
                        if (negativeCheck[0].length > 0) {
                            clean = negativeCheck[0];
                        }

                    }
        if (decimalCheck[1] != undefined) {
                        decimalCheck[1] = decimalCheck[1].slice(0, 2);
                        clean = decimalCheck[0] + '.' + decimalCheck[1];
                    }

    return clean;
  }

}

Additionally, I utilized this Pipe Extension in my directive.

import { Directive, Input, Inject, HostListener, OnChanges, ElementRef, Renderer, AfterViewInit, OnInit } from "@angular/core";
import { CurrencyPipe } from '../../shared/pipe/orderby';

@Directive({ selector: "[CurrencyFormatter]" })
export class CurrencyFormatterDirective {

  private el: HTMLInputElement;

  constructor(
    private elementRef: ElementRef,
    private currencyPipe: CurrencyPipe
  ) {
    this.el = this.elementRef.nativeElement;
  }

  ngOnInit() {
    this.el.value = this.currencyPipe.parse(this.el.value);
  }

  @HostListener("focus", ["$event.target.value"])
  onFocus(value) {
    this.el.value = this.currencyPipe.parse(value); // opposite of transform
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.el.value = this.currencyPipe.parse(value);
  }

  @HostListener("keyup", ["$event.target.value"]) 
  onKeyUp(value) {
    this.el.value = this.currencyPipe.parse(value);
  }

}

Remember to import the Directive in your component

import { CurrencyFormatterDirective } from '../../shared/directive/showOnRowHover';
import { CurrencyPipe } from '../../shared/pipe/orderby';
providers: [CurrencyPipe,
          CurrencyFormatterDirective]

Lastly, add the Directive to your html Input

<input type="text"  [(ngModel)]="invoiceDetail.InvoiceAmount" class="form-control" placeholder="Enter invoice amount"
          CurrencyFormatter>

Answer 4

I successfully implemented a solution with the help of @pipe

import { Directive, Input, Inject, HostListener, ElementRef, OnInit } from "@angular/core";

const PADDING = "000000";

@Pipe({ name: "CurrencyPipe" })
export class CurrencyPipe implements PipeTransform {
  transform(value: any, args: string[]): any {
     var clean = value.replace(/[^-0-9\.]/g, '');
    var negativeCheck = clean.split('-');
    var decimalCheck = clean.split('.');
    
     if (negativeCheck[1] != undefined) {
                        negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                        clean = negativeCheck[0] + '-' + negativeCheck[1];
                        if (negativeCheck[0].length > 0) {
                            clean = negativeCheck[0];
                        }

                    }
        if (decimalCheck[1] != undefined) {
                        decimalCheck[1] = decimalCheck[1].slice(0, 2);
                        clean = decimalCheck[0] + '.' + decimalCheck[1];
                    }

    return clean;
  }

  parse(value: string, fractionSize: number = 2): string {

     var clean = value.replace(/[^-0-9\.]/g, '');
    var negativeCheck = clean.split('-');
    var decimalCheck = clean.split('.');
    
     if (negativeCheck[1] != undefined) {
                        negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                        clean = negativeCheck[0] + '-' + negativeCheck[1];
                        if (negativeCheck[0].length > 0) {
                            clean = negativeCheck[0];
                        }

                    }
        if (decimalCheck[1] != undefined) {
                        decimalCheck[1] = decimalCheck[1].slice(0, 2);
                        clean = decimalCheck[0] + '.' + decimalCheck[1];
                    }

    return clean;
  }

}

Additionally, I utilized this Pipe Extension in my directive.

import { Directive, Input, Inject, HostListener, OnChanges, ElementRef, Renderer, AfterViewInit, OnInit } from "@angular/core";
import { CurrencyPipe } from '../../shared/pipe/orderby';

@Directive({ selector: "[CurrencyFormatter]" })
export class CurrencyFormatterDirective {

  private el: HTMLInputElement;

  constructor(
    private elementRef: ElementRef,
    private currencyPipe: CurrencyPipe
  ) {
    this.el = this.elementRef.nativeElement;
  }

  ngOnInit() {
    this.el.value = this.currencyPipe.parse(this.el.value);
  }

  @HostListener("focus", ["$event.target.value"])
  onFocus(value) {
    this.el.value = this.currencyPipe.parse(value); // opposite of transform
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.el.value = this.currencyPipe.parse(value);
  }

  @HostListener("keyup", ["$event.target.value"]) 
  onKeyUp(value) {
    this.el.value = this.currencyPipe.parse(value);
  }

}

Remember to import the Directive in your component

import { CurrencyFormatterDirective } from '../../shared/directive/showOnRowHover';
import { CurrencyPipe } from '../../shared/pipe/orderby';
providers: [CurrencyPipe,
          CurrencyFormatterDirective]

Lastly, add the Directive to your html Input

<input type="text"  [(ngModel)]="invoiceDetail.InvoiceAmount" class="form-control" placeholder="Enter invoice amount"
          CurrencyFormatter>

Answer 5

Answer №3

<input type='number' step='0.01' value='0.00' placeholder='0.00' />

Avoid using Step, instead use step. If necessary for compatibility with older browsers, consider implementing a JavaScript alternative.

Answer 6

<input type='number' step='0.01' value='0.00' placeholder='0.00' />

Avoid using Step, instead use step. If necessary for compatibility with older browsers, consider implementing a JavaScript alternative.

Ensure that only numbers with a maximum of two decimal places are accepted in Angular 2 for input

Answer №1

Answer №2

Answer №3

Similar questions

Having an issue with receiving an "undefined variable" error message when trying to validate a form using PHP and AJAX

An error is thrown when attempting to use npm install, stating "integrity checksum failed. The expected sha1 checksum was sha1-6G...=, but the actual checksum was sha512

Searching for several arrays in Angular

Executing a series of imported functions from a TypeScript module

Using aliases in npm packages is not supported

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Angular 13: SyntaxError Encountered: Token 'export' Not Recognized

What is the best way to interact with and modify the relationships of "many-to-many" fields in my database table?

How to make a div stand out when clicked in an Angular application

Visual Studio Code's Intellisense is capable of detecting overloaded functions in JavaScript

Modify the color of the select element when it is in an open state

Using MatTableDataSource in a different Angular component

What is the best way to showcase images at random in Angular?

How can jsPDF be used with Angular2 in Typescript?

What is the process for creating documentation for a TypeScript enum type with the format of { [key]: value }

Encountering Issues with TypeScript Strict in Visual Studio Code Problems Panel

Why is the getElement().getProperty("value") function not functioning properly?

Angular services do not hold onto data in memory

The fuse box was to blame for triggering a GET request to http://localhost:4444/, resulting in the error message

Error encountered while implementing onMutate function in React Query for Optimistic Updates