Spesso si ha la necessità di limitare i caratteri consentiti all'interno degli input nei nostri form. Il metodo di gestione più utilizzato prevede l'utilizzo dei validatori. Questi, essendo parte del sistema di validazione, consentono di gestire lo stato della form e conoscere, in un dato momento, se la form è compilata correttamente.
E se, invece di validare l'input, volessimo anche bloccare il possibile inserimento errato al momento della scrittura? Facciamone un esempio pratico: nel nome di una persona sono consentiti solo caratteri alfabetici. Utilizzando i validatori posso presentare un messaggio di errore nel caso in cui trovi un carattere vietato, ma in questo script vedremo come riuscire a intercettare l'immissione del carattere e gestirla in modo che l'input risulti sempre coerente con le validazioni.
Per poter utilizzare le funzionalità a basso livello, come gli eventi di input, abbiamo necessità di utilizzare il linguaggio JavaScript e, nel framework Angular, il posto perfetto per il nostro codice è una direttiva.
Costruiamo una direttiva in grado di gestire sia il keypress, che il paste, all'interno dell'input, e di validare il contenuto tramite una regex.
@Directive({ selector: '[specialCharacter]' }) export class SpecialCharacterDirective { /** * stesso nome del selettore per consentirne il set * accetta caratteri alfanumerici di default */ @Input() specialCharacter = '^[a-zA-Z0-9]*$'; constructor(private el: ElementRef) { } @HostListener('keypress', ['$event']) onKeyPress(event) { return new RegExp(this.specialCharacter).test(event.key); } @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) { this.validateFields(event); } validateFields(event) { setTimeout(() => { this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, '').replace(/\s/g, ''); event.preventDefault(); }, 100) } }
Una volta importata nel modulo, possiamo utilizzare questa direttiva all'interno delle nostre form.
<!-- nome --> <input specialCharacter formControlName="name"/> <!-- email con override della validazione --> <input [specialCharacter]="myEmailRegex" formControlName="email"/>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Come migrare da una form non tipizzata a una form tipizzata in Angular
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Miglioramenti nelle performance di Angular 16
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Reactive form tipizzati con modellazione del FormBuilder in Angular
Implementare il throttling in ASP.NET Core
Short-circuiting della Pipeline in ASP.NET Core
Recuperare un elemento inserito nella cache del browser tramite API JavaScript