I am trying to validate a input:number field using directive. The purpose of the field is to accept only numbers between 0-9 or a decimal number up to 3 decimal places (numbers will be positive all time without any symbols).

As there are same type of fields of more than 30 so thought of creating a directive that will prevent users from entering unnecessary characters.

Below is my code for the same along with a Stackblitz sample:

Directive:

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

@Directive({
  selector: '[validTestValue]'
})
export class NumberDirective {

  @HostListener('keydown', ['$event'])
  @HostListener('input', ['$event'])
  onKeyDown(e) {
    const key = ['Backspace', 'Delete', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
    let check = key.includes(e.key) && /^\d{1,7}((.)|(.\d{0,3})?)$/.test(e.target.value);
    console.log(check)
    if (!check) {
      e.preventDefault();
    }
  }
}

HTML:

<input type="number" validTestValue class="testInput-field text-center" />
<!--Same input fields are there many times in my code-->

The problem with this code is that I can enter value as I desired i.e. only digits and the decimal point is accepted but few other issues are arising like below:

1. Excepted result should be max 7 digits whether or not it is a decimal number. Example: 1, 12, 1234567
2. If decimal number then max 7 digits before decimal and max 3 digits after decimal. Example: 1, 1.2, 1.12, 1.123
3. Cannot Backspace (if length reached) or move cursor.
4. If the field is blank without any default value