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
Utilizzare la libreria FluentValidation per validare formalmente un oggetto .NET
Abilitare il drag&drop delle righe di una tabella in Angular
Effettuare il multibinding in un'applicazione Xamarin Forms
Usare i Top Level statement in C#
Introdurre la security nelle best practice di (Azure) DevOps
Validare una pipeline YAML senza eseguirla in Azure DevOps
Utilizzare le JavaScript Resize Observer API per rispondere ai cambiamenti di dimensione di un oggetto HTML
Utilizzare gli operatori di RxJS per gestire operazioni asincrone con Javascript e TypeScript
Progressive Web Apps with Angular
Impostare l'auto-complete delle pull request in Azure DevOps
Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
Creare un interceptor per ottimizzare il codice SQL generato da Entity Framework Core
I più letti di oggi
- Creare un web server locale con LiveReload
- Operatori di confronto in JavaScript: == e ===
- Microsoft WebCamp - Roma, Milano
- Dev Night #2: Serverless - Milano
- Disponibile la release finale di Moonlight 1.0
- Lancio ufficiale di Moonlight 1.0
- Disponibile il Silverlight Toolkit March 2009 Release
- MonoTouch in versione 1.0: C# per iPhone diventa realtà