Regulation specifying a cap of 100.00 on decimal numbers entered into a text input field (Regex)

Question

Regulation specifying a cap of 100.00 on decimal numbers entered into a text input field (Regex)

I have created a directive that restricts text input to only decimal numbers in the text field.

Below is the code for the directive:

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

@Directive({
    exportAs: 'decimal-number-directive',
    selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
    private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);
    private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home'];
    constructor(private el: ElementRef) {}
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent): void {
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        const current: string = this.el.nativeElement.value;
        const next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

Here is an example of its usage:

<div class="col-2 pr-0">
                        <label>{{ l('Percent') }}</label>
                        <input
                            class="form-control"
                            type="text"
                            decimal-number-directive
                            name="percent"
                            [(ngModel)]="inquiryItemToAdd.percent"
                            maxlength="64"
                            (ngModelChange)="setTotalPrice()"
                            [readOnly]="!inquiryItemToAdd.servicePriceId || !servicePrice.isPriceCalculated"
                        />
                    </div>

However, I am facing a challenge where I can still input values like 155.00 or 155.56. I aim to limit it to 100.00 as I am using this for writing percents.

I attempted to use the following regex

private regex: RegExp = new RegExp(/^(\d{1,2}(\.\d{1,2})?)|(100(\.0{1,2})?)$/g);

, but I am still able to input values exceeding 100 percent.

Any suggestions on how to solve this issue?

javascript regex angular typescript

Answer 1

Answer №1

Positive numbers should be matched from 0 to 100, including decimal values like 0.0 and 100.00

Regex:

^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$

https://regex101.com/r/S9fbY7/3

Update:

Allow the use of a dot in the input field as it is not valid when entered alone. Only validate on blur if the value ends with a dot.

Ignored Keys:

private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];

For validation on Blur:

if (val.endsWith('.')) {
  // Option 1: Remove the dot
  this.el.nativeElement.value = val.substring(0, val.length - 1); 

  // Option 2: Add '00' after the dot
  this.el.nativeElement.value = val + '00'; 

  // Option 3: Clear the entire value
  this.el.nativeElement.value = ''; 
}

Final Code:

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

@Directive({
  exportAs: 'decimal-number-directive',
  selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
  private regex: RegExp = new RegExp(/^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$/g);
  private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];
  constructor(private el: ElementRef) { }
  
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }

  @HostListener('blur', [])
  onBlur(): void {
    const val = this.el.nativeElement.value;
    if (val.endsWith('.')) {
      this.el.nativeElement.value = val.substring(0, val.length - 1); // Option 1: Remove the dot
      // this.el.nativeElement.value = val + '00'; // Option 2: Add '00' after the dot
      // this.el.nativeElement.value = ''; // Option 3: Clear the entire value
    }
  }
}

Answer 2

Positive numbers should be matched from 0 to 100, including decimal values like 0.0 and 100.00

Regex:

^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$

https://regex101.com/r/S9fbY7/3

Update:

Allow the use of a dot in the input field as it is not valid when entered alone. Only validate on blur if the value ends with a dot.

Ignored Keys:

private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];

For validation on Blur:

if (val.endsWith('.')) {
  // Option 1: Remove the dot
  this.el.nativeElement.value = val.substring(0, val.length - 1); 

  // Option 2: Add '00' after the dot
  this.el.nativeElement.value = val + '00'; 

  // Option 3: Clear the entire value
  this.el.nativeElement.value = ''; 
}

Final Code:

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

@Directive({
  exportAs: 'decimal-number-directive',
  selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
  private regex: RegExp = new RegExp(/^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$/g);
  private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];
  constructor(private el: ElementRef) { }
  
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }

  @HostListener('blur', [])
  onBlur(): void {
    const val = this.el.nativeElement.value;
    if (val.endsWith('.')) {
      this.el.nativeElement.value = val.substring(0, val.length - 1); // Option 1: Remove the dot
      // this.el.nativeElement.value = val + '00'; // Option 2: Add '00' after the dot
      // this.el.nativeElement.value = ''; // Option 3: Clear the entire value
    }
  }
}

Answer 3

Answer №2

Experiment with this regular expression:

^ :- This will verify that the string always begins with 100
[0]{2} :- This ensures that after the decimal point, there are exactly 2 zeros.

private regex: RegExp = /^100\.[0]{2}/gm;

You can see the outcome here.

Answer 4

Experiment with this regular expression:

^ :- This will verify that the string always begins with 100
[0]{2} :- This ensures that after the decimal point, there are exactly 2 zeros.

private regex: RegExp = /^100\.[0]{2}/gm;

You can see the outcome here.

Answer 5

Answer №3

The solution seems to be this specific pattern: ^(\d{0,2}(.\d{1,2})?|100(.00?)?)$

Answer 6

The solution seems to be this specific pattern: ^(\d{0,2}(.\d{1,2})?|100(.00?)?)$

Regulation specifying a cap of 100.00 on decimal numbers entered into a text input field (Regex)

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with importing SendInBlue into my NodeJS application?

Building a collapsible toggle feature with an SVG icon using HTML and CSS

Sharing environment variables between a React app and an Express.js server that hosts it as a static site can be achieved by setting

Generating automatic generic types in Typescript without needing to explicitly declare the type

Place an image at the center with a height set to 100% within a div that has a fixed height and

Having trouble interpreting PHP-generated JSON data in JavaScript

The $.inArray() function returns a value of false or -1, despite the fact that the variable

How can we handle multiple asynchronous calls within a function?

What is the best way to access a property within a typescript object?

The object literal can only define properties that are already known, and 'data' is not found in the type 'PromiseLike<T>'

The URL routing in Vue-router seems to be incorrect as it directs to the wrong page. To fix this issue, make sure to include a '#' before the

What could be causing the change event to be triggered in a v-text-field when I press enter, despite not making any changes?

Using the typeof operator to test a Typescript array being passed as an object

Issue with scrolling feature in div

How to access the state of an @ngrx/data entity in a reducer function in ngrx 8

Display the menu and submenus by making a request with $.get()

What is causing JS to malfunction and preventing App Scripts from running `doGet()` when using either `e` or `event` as parameters?

methods to retrieve value from a javascript function

Generate a new entry by analyzing components from a separate array in a single line

Ways to declare the function prototype using object and key as parameters