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：CLICK HERE

Answer 1

如图所示，您的input-validator.directive.ts在app文件夹之外。

我已经在指令模块中编辑并导入了指令。

在此处检查正在运行的stackblitz。该应用现在正在记录keydown消息。

Angular 4-指令中的事件监听器不起作用

1 个答案: