Angular 8中如何限制输入框仅允许字母数字，禁止特殊字符

你当前的代码仅对输入文本做了正则替换，但没有将处理后的结果重新赋值给表单控件myName，所以输入框里的原始内容不会被更新，导致特殊字符依然显示。

方法一：直接更新表单控件值 #

修改component.ts中的value方法，把清理后的文本赋值回myName：

value(text: any){
  const cleanedText = text.replace(/[^a-zA-Z0-9-]/g, '');
  this.myName.setValue(cleanedText);
}

方法二：用valueChanges监听（更推荐） #

无需在模板绑定ngModelChange，直接在组件初始化时监听控件值变化并处理：

ngOnInit() {
  this.myName.valueChanges.subscribe(text => {
    const cleanedText = text.replace(/[^a-zA-Z0-9-]/g, '');
    if (text !== cleanedText) {
      this.myName.setValue(cleanedText);
    }
  });
}

模板简化为：

<input type="text" placeholder="Name" [formControl]="myName">

额外优化：阻止特殊字符输入（可选） #

如果想让特殊字符完全不显示，可配合keydown事件过滤：

<input type="text" placeholder="Name" [formControl]="myName" (keydown)="onKeyDown($event)">

组件中添加方法：

onKeyDown(event: KeyboardEvent) {
  const allowedChars = /^[a-zA-Z0-9-]$/;
  const key = event.key;
  // 允许退格、删除、快捷键等控制操作
  if (event.keyCode === 8 || event.keyCode === 46 || event.ctrlKey || event.metaKey) {
    return;
  }
  if (!allowedChars.test(key)) {
    event.preventDefault();
  }
}

该方法可拦截键盘输入的特殊字符，再结合文本替换处理粘贴等场景的特殊字符。

内容的提问来源于stack exchange，提问作者neelam