Angular如何实现Input仅允许输入数字且首字符不能为0

原有代码问题 #

• 第一版逻辑initalValue<1存在类型错误：输入值为字符串类型，直接和数字比较会触发隐式类型转换，逻辑完全不符合预期，且未做非数字字符过滤
• 注释的第二版仅支持过滤非数字字符，没有处理首字符为0的校验规则

修正后完整实现 #

自定义指令代码 #

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

@Directive({
  selector: '[appNonZeroNumbersOnly]'
})
export class NonZeroNumbersOnlyDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event: Event) {
    const inputEle = this._el.nativeElement;
    // 1. 过滤所有非数字字符
    let processedValue = inputEle.value.replace(/[^0-9]/g, '');
    // 2. 移除开头所有0，满足首字符非0要求
    processedValue = processedValue.replace(/^0+/, '');
    // 回写处理后的值
    inputEle.value = processedValue;
    // 手动触发input事件，确保Angular表单绑定同步更新
    inputEle.dispatchEvent(new Event('input'));
    event.stopPropagation();
  }
}

调用代码调整 #

建议使用Angular的双向绑定语法代替原生value属性，避免绑定不同步问题：

<td class="unit">
  <input type="text" [(ngModel)]="billItem.quantity" appNonZeroNumbersOnly />
</td>

如果使用响应式表单，绑定formControl即可：

<td class="unit">
  <input type="text" formControlName="quantity" appNonZeroNumbersOnly />
</td>

可选调整 #

如果业务允许输入单个0作为有效值，只需要修改第二步的处理逻辑即可：

// 仅当长度大于1时移除开头的0，长度为1时保留0
processedValue = processedValue.length > 1 ? processedValue.replace(/^0+/, '') : processedValue;

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