我想在全局范围内限制 Angular 9 中的输入类型文本仅字母数字

【问题标题】：I want to restrict input type text only Alphanumeric in Angular 9 globally我想在全局范围内限制 Angular 9 中的输入类型文本仅字母数字
【发布时间】：2020-10-01 21:49:36
【问题描述】：

谁能建议我如何在全球范围内添加 ng-pattern/directive/RegEx？这样我就不想通过添加 ng-pattern 或添加指令来访问每个页面并触摸每个输入。

我的应用程序大约有 200 页，我不想限制每个文本输入只能使用字母数字。

是否有任何解决方案编写适用于整个应用程序的通用逻辑？请建议，我正在使用 Angular 8。

提前谢谢你。

【问题讨论】：

您可以使用指令将其应用于所有输入，但我不知道您是否真的想这样做。编写自己的输入组件或表单控件工厂可能会更好地为您服务
谢谢Aluan，如果我创建指令.. 我需要在所有组件中导入该指令。基本上我不想触摸任何输入或组件..有没有办法通过在 app-module 中导入该指令来做？它将影响所有组件。请提出建议。
我明白了，我需要在根模块中定义，如stackblitz.com/edit/…中的建议。

标签： javascript html angular typescript

【解决方案1】：

如果您使用选择器创建指令 input 将应用于您的所有输入

@Directive({
  selector: 'input'
})

您可以使用类似this SO 的指令来获取它，只需将输入集掩码替换为类似的东西

  @Input()
  set mask(value) {
    if (value == "*")
      this.notApplied = true;
    else
      this.regExpr = new RegExp(value);
  }

将正则表达式声明为

  private regExpr = new RegExp(/^[A-Z|a-z|0-9]+$/);

如果 this.notApplied 则更改主机侦听器签入

  @HostListener('input', ['$event'])
  change($event) {
    if (this.notApplied)
      return;
    ...
  }

所有没有[mask]="what ever" 的输入都按缺陷应用了掩码

mask="*" 的输入将是“正常”输入

见forked directive

【讨论】：