Angular输入框限制：禁止输入负号与单独输入0

需求实现方案 #

针对需求中的三个核心要求，通过调整键盘事件拦截、输入值转换逻辑及掩码配置，可完成以下效果：

• 自动将用户输入的数字转为负数
• 禁止用户手动输入负号（按下负号键无响应）
• 禁止单独输入0，仅允许0出现在其他数字之后

修正后的HTML代码 #

<mat-form-field *ngIf="hasCashContribution === 'no'" 
                appearance="fill" 
                class="deal-form-date-picker opacity87" 
                [ngClass]="{'enabled-input': hasCashContribution === 'no'}" 
                style="padding-right: 16px;">
  <mat-label [ngClass]="{'alter-text-color': hasCashContribution === 'no'}">Payment</mat-label>
  <input matInput 
         [(ngModel)]="cashContribution" 
         (ngModelChange)="onInputChange()" 
         class="alter-text-color" 
         mask="separator.0" 
         thousandSeparator="," 
         [allowNegativeNumbers]="false"
         (keydown)="onKeyDown($event)">
  <span matPrefix class="alter-text-color" *ngIf="hasCashContribution === 'no'">$</span>
</mat-form-field>

修正后的TS代码 #

onInputChange() {
  if (this.cashContribution === null || this.cashContribution === undefined) {
    return;
  }
  // 确保最终值始终为负数
  this.cashContribution = Math.abs(this.cashContribution) * -1;
}

onKeyDown(event: KeyboardEvent) {
  const keyPressed = event.key;
  const inputValue = this.cashContribution?.toString() || '';

  // 拦截负号输入
  if (keyPressed === '-') {
    event.preventDefault();
    return;
  }

  // 拦截单独输入0的情况：输入框为空或当前值为0时，禁止按下0
  if (keyPressed === '0' && (inputValue === '' || inputValue === '0')) {
    event.preventDefault();
    return;
  }
}

关键调整说明 #

• 替换事件类型：将keypress改为keydown，覆盖数字小键盘按键等更多场景，确保拦截逻辑更全面
• 掩码配置优化：将[allowNegativeNumbers]设为false，从根源上禁止掩码生成负号输入的可能
• 空值边界处理：在输入转换和键盘事件中增加空值判断，避免未定义状态导致的逻辑错误
• 单独0拦截逻辑：补充输入框为空时的0按键拦截，彻底禁止用户单独输入0
• 负数转换逻辑简化：使用Math.abs统一处理输入值，确保无论用户输入正负，最终都转为负数

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