Angular 4 - слушатель событий в директиве не работает

Question

Я создал директиву, которая запрещает пользователям вводить любые символы, кроме цифр, точек и запятых.Однако событие, которое должно вызываться, когда пользователь вводит что-то, не вызывается, и я не понимаю, почему:

input-validator.directive.ts

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

@Directive({
  selector: '[appinputvalidator]'
})
export class InputValidatorDirective {

private regex: RegExp = new RegExp('^[0-9]{1,2}([,.][0-9]{1,2})?$');

// Allow key codes for special events
// Backspace, tab, end, home
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];

constructor(private el: ElementRef) {
}

@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
        return;
    }

    let current: string = this.el.nativeElement.value;
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
        event.preventDefault();
    }
}
  }

HTML

<td *ngIf="c.name == 'value' && typeId != 2">
<input class="form-control" 
       type="tel"  
       min="0" 
       step="1" 
       inputmode="tel" 
       appinputvalidator pattern="^[0-9]{1,2}([,.][0-9]{1,2})?$"  
       pInputText 
       [(ngModel)]="item[grid.columns[y].dataKey]" 
       id="value1-{{i}}" 
       name="value1-{{i}}" 
       (keyup)="changeItem(item, $event, i)" 
       [required]="item.remark != null ? true : false" 
       [readonly]="typeID == 0 ? true : false" />
</td>

Даже если я помещу отладчик в onkeydown, он не достигает кода, когда я тестирую его в браузере.Что не так?

Я импортировал его в app.module.ts следующим образом

import { InputValidatorDirective } from './shared/components/inputvalidator.directive';

, а также включил в @NgModule в разделе "декларации":

    declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    FooterComponent,
    LeftMenuComponent,
    HeaderComponent,
    RightMenuComponent,
    ConfirmDialogComponent,
    LogoutComponent,
    InputValidatorDirective
],

Stackblitz: ЩЕЛКНИТЕ ЗДЕСЬ

Answer 1

Как видно на картинке, ваш input-validator.directive.ts находился вне папки приложения.

Я отредактировал и импортировал директиву в модуль приложения.

Проверьте работу stackblitz здесь. Приложение теперь регистрирует сообщение keydown.