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"/>