Angular中如何限制用户输入小数点后超过两位的数字

实现思路 #

通过监听输入框的input事件，实时拦截不符合规则的输入内容，确保用户无法输入超过两位的小数，同时限制整数部分最多两位（匹配你提供的正则规则）。

步骤1：修改模板中的输入框代码 #

给input添加input事件监听，保留原有属性：

<mat-form-field appearance="outline" [floatLabel]="'always'">
  <input 
    matInput 
    formControlName="bathsNum" 
    [(ngModel)]="noOfbaths" 
    (blur)="formatBathsNum($event)"
    (input)="restrictDecimalInput($event)"
  >
</mat-form-field>

步骤2：在组件类中实现限制输入的方法 #

在对应组件的.ts文件中添加以下方法，实时处理输入内容：

restrictDecimalInput(event: Event): void {
  const inputElement = event.target as HTMLInputElement;
  let value = inputElement.value;

  // 移除所有非数字和非小数点的字符
  value = value.replace(/[^\d.]/g, '');
  
  // 限制仅能输入一个小数点
  const parts = value.split('.');
  if (parts.length > 2) {
    value = parts[0] + '.' + parts.slice(1).join('');
  }

  // 整数部分最多保留两位
  if (parts[0].length > 2) {
    parts[0] = parts[0].substring(0, 2);
    value = parts.join('.');
  }

  // 小数部分最多保留两位
  if (parts.length === 2 && parts[1].length > 2) {
    parts[1] = parts[1].substring(0, 2);
    value = parts.join('.');
  }

  // 更新输入框值
  inputElement.value = value;
  // 同步ngModel和表单控件的值
  this.noOfbaths = value;
  this.yourFormGroup.get('bathsNum')?.setValue(value);
}

注意：将代码中的yourFormGroup替换为你实际使用的表单组实例名称。

步骤3：保留表单校验（可选） #

如果需要同时保留表单校验逻辑，可在表单初始化时添加正则校验器，防止通过粘贴等非常规方式输入不符合规则的值：

// 表单初始化时添加校验规则
this.yourFormGroup = this.fb.group({
  bathsNum: ['', [
    Validators.pattern(/^\d{1,2}(\.\d{0,2})?$/)
  ]]
});

补充说明 #

• 该方法会实时拦截不符合规则的输入，用户输入到小数两位后无法继续输入更多数字，整数部分也会被限制在两位以内。
• 自动处理多小数点、非数字字符、超长整数/小数等异常情况，确保输入始终符合规则。

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