Estoy tratando de validar un campo de entrada: número usando la directiva. El propósito del campo es aceptar solo números entre 0-9 o un número decimal hasta 3 lugares decimales (los números serán positivos todo el tiempo sin ningún símbolo).

Como hay más de 30 campos del mismo tipo, se pensó en crear una directiva que evite que los usuarios ingresen caracteres innecesarios.

A continuación se muestra mi código para el mismo junto con una muestra de Stackblitz :

Directiva:

 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-->

El problema con este código es que puedo ingresar el valor que deseaba, es decir, solo se aceptan dígitos y el punto decimal, pero surgen algunos otros problemas como los siguientes:

1. El resultado exceptuado debe tener un máximo de 7 dígitos, sea o no un número decimal. Ejemplo: 1, 12, 1234567
2. Si es un número decimal, un máximo de 7 dígitos antes del decimal y un máximo de 3 dígitos después del decimal. Ejemplo: 1, 1.2, 1.12, 1.123
3. No se puede retroceder (si se alcanza la longitud) ni mover el cursor.
4. Si el campo está en blanco sin ningún valor predeterminado