输入类型的自定义行为="number" [Angular]

Question

使用 Firefox，用户可以将字母输入 <input type="number"/>。我使用自定义指令阻止了这种情况，该指令仅启用字符 [0-9].

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

@Directive({
  selector: '[appOnlyNumber]',
})
export class OnlyNumberDirective {
  readonly acceptedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

  @HostListener('keydown', ['$event']) down(e: any) {
    if (!this.acceptedKeys.includes(e.key)) {
      e.preventDefault();
    }
  }

  constructor(private er: ElementRef) {}
}

但是现在我们的编码人员需要记住在创建数字输入时始终包含此指令。我希望这个过程万无一失，所以永远不会忘记。

有没有办法至少警告程序员忘记添加这个指令？就像在构建后检查 DOM，当它包含输入数字而不是指令时，而不是在控制台中发送警告？

或者我可以覆盖默认输入 HTML 元素的功能，以默认使用此键预防 （仅限 0-9） 吗？

Answer 1

在指令中使用属性选择器：

@Directive({
  selector: 'input[type="number"]',
})

输入类型的自定义行为="number" [Angular]

Custom behaviour on input type="number" [Angular]

numbers

directive

input

typescript

angular