Tengo que crear un campo de entrada en Angular, ese campo de entrada solo permite números con 2 decimales como '123455.12'

A continuación se muestra lo que he intentado hasta ahora.

<input myCustomDirective type="text">

Creé la directiva. En mi CustomDirective utilicé HostListener para el evento de pulsación de tecla en ese oyente, utilicé la expresión regular para validar, pero solo permite un número que no permite ingresar '. (Punto)'

new RegExp('^[0-9]*$'); // mi expresión regular

1
Angular Dev 9 may. 2019 a las 21:53

3 respuestas

La mejor respuesta

Aquí hay una directiva que toma solo valores decimales con precisiones personalizadas.

https://stackblitz.com/edit/angular-decimal-directive

  • Le permitirá poner dígitos antes del. (Punto)
  • No le permitirá pegar (ctrl + v) no decimal.
  • Tomará solo. (Punto). Por defecto, tomará 2 dígitos después de. (punto).

Ejemplo:

`<input type="text" [(ngModel)]="myVar" decimal>`

Pero puede definir el tamaño de precisión así:

`<input type="text" [(ngModel)]="myVar" [decimal]="3">`
  • Si desea usar Solo entero, no punto flotante, puede usar la Directiva así:

    <input type="text" [(ngModel)]="myVar" [decimal]="0">

  • Si no completa la precisión suficiente en la entrada, entonces completar automáticamente el resto de la precisión numérica (también si a. (punto) necesario) por evento onblur.

  • No puede inyectar el valor de la cadena mediante un enlace bidireccional.

N.B: [(ngModel)] es obligatorio para usar la Directiva.

2
Azizul Hoq 30 jun. 2019 a las 04:14

Consulte el violín jsfiddle.net/gsferreira/Lsv9f0b0, publicado en el enlace, ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" es la clave

Desde el enlace de violín del script Java simple https://jsfiddle.net/j3cbytws/

Solo números por favor y un solo punto permitido, nada más:

<input type="number" name="someid" onkeypress="return isNumberKey(event)" /> 

<script>
var isDecimalAlredyEcountered = false;
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if(isDecimalAlredyEcountered && charCode === 46)
    return false;
   if(charCode == 46)
    {isDecimalAlredyEcountered =true;
    }
    if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 46)
        return false;
    return true;
}    
</script>

Puede haber un problema de backspace char y delete con la implementación anterior, por lo que debe restablecer el estado en clear

0
Yugansh 10 may. 2019 a las 01:21

Ng-pattern que necesita es ng-pattern=" /^[.\d]+$/"

0
Ashok 9 may. 2019 a las 19:52