当角度应用程序中达到最大长度时如何防止输入字段上的其他字符

Question

我正在实施一个指令，以阻止用户在我的 Angular 6 应用程序的输入字段中输入其他字符。并允许非数据输入键，如制表符、德尔、退格等，我有一个带有event.which的if条件@

export class MaxLengthDirective {

maxLength: number;

constructor(private el: ElementRef, private ngControl: NgControl) {}

@HostListener('keydown', ['$event'])
onKeyDown(event) {
 const element = this.el.nativeElement;
 if (element.value.length >= this.maxLength) {
  if (event.which !== 8 && event.which !== 9 && event.which !== 46)
    event.preventDefault();
  }
 }
}

但是当我想允许更多键盘输入（例如ctrl+ C 或back arrow 或shift + tab 等）时，我的if 条件会变长

当长度超过时，是否有一种更智能的方法来处理我的输入控件上的非数据输入，以便我仍然可以接受非数据键，例如 tab、del、后退箭头等

Answer 1

我的非纯角度命题（只允许字母数字键）：

<input type="text" onkeydown="return /[a-z0-9]/i.test(event.key)" [attr.maxlength]="maxLength">