如何让仅支持数字的matInput强制以指定数字开头？

原代码问题分析 #

你之前的实现有两个核心问题：

1. 正则表达式无效：用字符串包裹正则表达式（'/[^' + this.starter + '][^0-9]/g'）会导致JS无法正确解析为正则对象，且匹配逻辑本身不符合需求；
2. 替换逻辑错误：原正则试图匹配"非指定数字+非数字"的组合，无法实现强制开头为指定数字的效果。

修正后的完整实现 #

HTML 代码（无需修改）

<input matInput autocomplete="off" formControlName="start" minlength="3" maxlength="3"
       type="text" (input)="forceStart($event)">

TypeScript 核心逻辑

starter: number = 4;

forceStart(e: Event) {
  const input = e.target as HTMLInputElement;
  let value = input.value.replace(/\D/g, ''); // 过滤所有非数字字符
  const starterStr = this.starter.toString();

  // 强制确保开头是指定数字
  if (!value.startsWith(starterStr)) {
    // 开头不符合时，将指定数字作为前缀，后续保留最多2位数字（满足3位总长度）
    value = starterStr + value.slice(0, 2);
  } else {
    // 开头正确时，截取前3位数字限制长度
    value = value.slice(0, 3);
  }

  // 更新输入框显示值
  input.value = value;
  // 同步更新表单控件值，避免表单数据与输入框显示不一致
  this.yourForm.get('start')?.setValue(value);
}

关键逻辑解释 #

• 过滤非数字：用/\D/g正则快速移除所有非数字字符，确保输入仅包含数字；
• 强制开头匹配：检查处理后的字符串是否以starter对应的字符开头，若不匹配则直接将指定数字作为开头，后续保留最多2位数字，保证总长度不超过3；
• 表单同步：由于直接修改输入框的值不会自动触发响应式表单的控件更新，因此需要手动调用setValue同步表单数据。

响应式表单初始化补充 #

如果还未初始化表单，需在组件中完成FormGroup的创建：

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

@Component({ /* 组件元数据 */ })
export class YourComponent {
  yourForm: FormGroup;
  starter: number = 4;

  constructor(private fb: FormBuilder) {
    this.yourForm = this.fb.group({
      start: [''] // 可添加验证器，如 Validators.minLength(3)
    });
  }

  // forceStart 函数同上
}

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