Creé una directiva para prohibir al usuario ingresar valores negativos y caracteres especiales en el cuadro de entrada. Con el siguiente código, el usuario no puede copiar y pegar nada a través del teclado. Además, debo tener cuidado de que si el usuario pega algún carácter especial, debe reemplazarse por un carácter vacío.
import { Directive, HostListener, ElementRef } from '@angular/core'; @Directive({ selector: '[esg365-positiveNumbersOnly]' }) export class NumbersOnlyDirective { private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/); private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home']; constructor(private readonly el: ElementRef) { } @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { console.log('Keyboard event is::',event); 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(); } } } import {Directive, HostListener, ElementRef} from '@angular/core'; @Directive({ selector: '[esg365-positiveNumbersOnly]' }) export class NumbersOnlyDirective { private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/); private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home']; constructor(private readonly el: ElementRef) { } @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { if (this.specialKeys.indexOf(event.key) !== -1 || // Allow: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Allow: Ctrl+C (event.keyCode == 67 && event.ctrlKey === true) || // Allow: Ctrl+X (event.keyCode == 88 && event.ctrlKey === true) || // Allow: Ctrl+V (event.keyCode == 86 && event.ctrlKey === true) || // Allow: home, end, left, right (event.keyCode >= 35 && event.keyCode <= 39) ) { return; } const current: string = this.el.nativeElement.value; const next: string = current.concat(event.key); if (next && !String(next).match(this.regex)) { event.preventDefault(); } } }o
import {Directive, HostListener, ElementRef} from '@angular/core'; @Directive({ selector: '[esg365-positiveNumbersOnly]' }) export class NumbersOnlyDirective { private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/); private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home']; constructor(private readonly el: ElementRef) { } @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { if (this.specialKeys.indexOf(event.key) !== -1 || // Allow: Ctrl+A (event.key == 'Select' && event.ctrlKey === true) || // Allow: Ctrl+C (event.key == 'Copy' && event.ctrlKey === true) || // Allow: Ctrl+X (event.key == 'Cut' && event.ctrlKey === true) || // Allow: Ctrl+V (event.key == 'Paste' && event.ctrlKey === true) || // Allow: home (event.key == 'Home' && event.ctrlKey === true) || // Allow: end (event.key == 'End' && event.ctrlKey === true) || // Allow: left (event.key == 'Left' && event.ctrlKey === true) || // Allow: right (event.key == 'Right' && event.ctrlKey === true) ) { return; } const current: string = this.el.nativeElement.value; const next: string = current.concat(event.key); if (next && !String(next).match(this.regex)) { event.preventDefault(); } } }