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
Controllare gli accessi IP alle app con Azure Container Apps
Disabilitare automaticamente un workflow di GitHub
Utilizzare la libreria Benchmark.NET per misurare le performance
Miglioramenti nell'accessibilità con Angular CDK
Usare le collection expression per inizializzare una lista di oggetti in C#
Configurare policy CORS in Azure Container Apps
.NET Conference Italia 2023
Utilizzare i primary constructor in C#
Utilizzare un service principal per accedere a Azure Container Registry
Creare form tipizzati con Angular
Linting di un Dockerfile con un workflow di GitHub