Как в реактивных формах Angular предотвратить ввод определённых символов?

Question

[Роман Ракзин]

Подскажите пример, как реализовать для определённых полей ввод, например только цифр, кириллических символов, либо ограничить по количеству, или только по определённому регулярному выражению.
Валидаторы определяют уже имеющуюся ошибку, а мне нужно как-то предотвратить ввод, если для поля только, скажем 4 символа нужно либо же иное правило.
Я уже думал через декораторы проверку делать и если не проходит, то отклонять, и библиотеки смотрел, но реализовать задуманное пока что не удалось.
Как сделать банальное ограничение ввода символов?

Answer 1

[Виктор П.]

Можешь на событие keyDown повесить функцию, внутри которой просто результат к цифрам кастишь или другую нужную тебе логику делаешь. Либо еще посмотри события (input) или что-то про change text

Answer 2

[dcooder]

import {Directive, HostListener, Input} from '@angular/core';

@Directive({
  selector: 'input[appInputDenySymbols]'
})
export class InputDenySymbolsDirective {

  @Input() appInputDenySymbols: string;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    if (this.appInputDenySymbols.indexOf(event.key) !== -1) {
      event.preventDefault();
    }
  }

}

Потом эту директиву юзаешь так:

<input appInputDenySymbols='1234567890' >
чтобы запретить ввод цифр. Можно сделать по такому же принципу на регуляроное выражение.