如何在Angular输入框中禁止输入负号'-'并自动清理非法值

下面提供两种不同场景的实现方式，可根据需求选择：

方案1：键盘事件实时拦截（输入时直接禁止） #

适合需要在输入阶段就阻止负号出现的场景，无内容闪烁，体验更好：

• 模板中绑定键盘按下事件：

<input 
  type="text" 
  (keydown)="handleKeyDown($event)"
  placeholder="请输入内容"
>

• 组件中添加事件处理逻辑：

handleKeyDown(event: KeyboardEvent): void {
  // 同时拦截主键盘负号、小键盘减号输入
  if (['-', 'Minus', 'NumpadSubtract'].includes(event.key)) {
    event.preventDefault();
  }
}

方案2：值变化时自动清除所有负号（兼容复制粘贴场景） #

可覆盖用户复制粘贴带负号内容、拖拽输入等键盘拦截不到的场景，完全避免负号出现：

模板驱动表单用法 #

<input 
  type="text" 
  [(ngModel)]="inputVal"
  (input)="removeMinus()"
>

inputVal = '';

removeMinus(): void {
  // 全局替换所有位置的负号
  this.inputVal = this.inputVal.replace(/-/g, '');
}

响应式表单用法 #

import { FormBuilder, FormGroup } from '@angular/forms';

export class TestComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      inputField: ['']
    });
  }

  ngOnInit(): void {
    this.form.get('inputField')?.valueChanges.subscribe(value => {
      if (value?.includes('-')) {
        // emitEvent设为false避免触发值变化死循环
        this.form.get('inputField')?.setValue(value.replace(/-/g, ''), { emitEvent: false });
      }
    });
  }
}

额外提示：如果需要同时限制仅允许输入数字，可将替换规则调整为replace(/[^0-9]/g, '')，会自动清除所有非数字字符

内容的提问来源于stack exchange，提问作者Thinley Jimmy Dorji