Utilizzare una direttiva di Angular per limitare i caratteri inseribili in una textbox

di Morgan Pizzini, in HTML5, Angular,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi