Angular/TypeScript输入框正则：限制1-3位非0开头数字

方案1：快速修改原生按键校验 #

你当前的onkeypress仅限制数字输入，未处理开头为0的情况。可以结合输入框已有内容做校验：

<input matInput
  [(ngModel)]="backupIntervalLength"
  (ngModelChange)="onIntervalLengthChange($event)"
  maxLength="3"
  #inputRef
  (keypress)="validateInput($event, inputRef)"
>

在组件类中定义校验函数：

validateInput(event: KeyboardEvent, input: HTMLInputElement): boolean {
  const char = String.fromCharCode(event.charCode);
  // 拦截非数字字符
  if (!/[0-9]/.test(char)) return false;

  const currentValue = input.value;
  // 空输入时禁止输入0
  if (currentValue.length === 0 && char === '0') return false;
  // 已有3位时禁止继续输入
  if (currentValue.length >= 3) return false;

  return true;
}

方案2：Angular模板驱动表单验证（推荐） #

用Angular内置验证规则结合值修正，覆盖按键、粘贴等所有输入场景：

<input matInput
  #intervalInput="ngModel"
  [(ngModel)]="backupIntervalLength"
  (ngModelChange)="fixInputValue($event)"
  maxLength="3"
  pattern="^[1-9]\d{0,2}$"
  required
>

<!-- 可选：错误提示 -->
<div *ngIf="intervalInput.invalid && (intervalInput.dirty || intervalInput.touched)">
  <p *ngIf="intervalInput.errors?.['pattern']">请输入1-3位不以0开头的数字</p>
  <p *ngIf="intervalInput.errors?.['maxlength']">最多输入3位数字</p>
</div>

组件类中添加值修正函数：

fixInputValue(value: string): void {
  // 移除所有非数字字符
  let cleaned = value.replace(/\D/g, '');
  // 去掉前导0
  if (cleaned.startsWith('0')) {
    cleaned = cleaned.replace(/^0+/, '');
  }
  // 限制长度为3
  if (cleaned.length > 3) {
    cleaned = cleaned.slice(0, 3);
  }
  this.backupIntervalLength = cleaned || '';
}

方案3：自定义验证指令（复用场景） #

如果多个输入框需要该规则，可封装自定义指令：

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appNonZeroLeadingNum]',
  providers: [{ provide: NG_VALIDATORS, useExisting: NonZeroLeadingNumDirective, multi: true }]
})
export class NonZeroLeadingNumDirective implements Validator {
  @Input() maxDigits = 3;

  validate(control: AbstractControl): ValidationErrors | null {
    const value = control.value;
    if (!value) return null;
    
    const pattern = new RegExp(`^[1-9]\\d{0,${this.maxDigits - 1}}$`);
    return pattern.test(value) ? null : { nonZeroLeadingNum: true };
  }
}

模板中使用：

<input matInput
  #intervalInput="ngModel"
  [(ngModel)]="backupIntervalLength"
  (ngModelChange)="fixInputValue($event)"
  maxLength="3"
  appNonZeroLeadingNum
  maxDigits="3"
  required
>

<div *ngIf="intervalInput.invalid && (intervalInput.dirty || intervalInput.touched)">
  <p *ngIf="intervalInput.errors?.['nonZeroLeadingNum']">请输入1-3位不以0开头的数字</p>
</div>

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