Custom Angular Input Mask适配多长度尺寸值的错位问题及解决需求

这个问题的核心在于固定掩码无法适配整数部分位数变化的数值，比如2.3（1位整数）和12.3（2位整数）在固定的00.0x00.0x00.0掩码下，字符长度不匹配，导致错位显示。下面给你几个可行的解决方案，按需选择：

方案一：动态生成匹配数值长度的掩码 #

根据每个维度的实际数值长度，动态生成对应的掩码片段，再拼接成完整掩码。这种方式能完美适配不同位数的数值，且不需要修改数值的显示格式。

TypeScript 代码 #

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnChanges {
  @Input() dimensionObject: { length: number; width: number; height: number };
  dynamicMask: string = '';

  ngOnChanges() {
    // 当维度数据变化时，重新生成掩码
    this.dynamicMask = this.buildDynamicMask();
  }

  // 生成单个维度的掩码片段
  private getDimensionMask(value: number): string {
    const integerPartLength = Math.floor(value).toString().length;
    // 小数部分固定1位，所以掩码格式为「N个0 + .0」
    return `${'0'.repeat(integerPartLength)}.0`;
  }

  // 拼接完整的动态掩码
  private buildDynamicMask(): string {
    if (!this.dimensionObject) return '';
    const lengthMask = this.getDimensionMask(this.dimensionObject.length);
    const widthMask = this.getDimensionMask(this.dimensionObject.width);
    const heightMask = this.getDimensionMask(this.dimensionObject.height);
    return `${lengthMask}x${widthMask}x${heightMask}`;
  }
}

模板代码 #

<input matInput 
       [placeholder]="'Dimension (LxHxW)'" 
       formControlName="dimensions" 
       name="dimensions" 
       [mask]="dynamicMask" 
       [specialCharacters]="['x', '.']" 
       [clearIfNotMatch]="true" 
       [showMaskTyped]="true" />

方案二：使用自定义掩码函数（支持实时输入适配） #

如果需要支持用户手动输入尺寸值，且输入过程中掩码能实时适配，可以用ngx-mask提供的函数类型掩码，根据当前输入值动态调整掩码规则。

TypeScript 代码 #

dynamicMaskFunction = (value: string): string => {
  if (!value) return '0.0x0.0x0.0'; // 初始默认掩码

  // 分割输入值为三个维度部分
  const parts = value.split('x');
  const masks = parts.map(part => {
    if (!part) return '0.0';
    // 判断当前输入部分是否包含小数点，计算整数部分长度
    const integerPartLength = part.includes('.') 
      ? part.split('.')[0].length 
      : part.length;
    return `${'0'.repeat(integerPartLength)}.0`;
  });

  // 补全不足三个维度的掩码
  while (masks.length < 3) {
    masks.push('0.0');
  }
  return masks.join('x');
}

模板代码 #

<input matInput 
       [placeholder]="'Dimension (LxHxW)'" 
       formControlName="dimensions" 
       name="dimensions" 
       [mask]="dynamicMaskFunction" 
       [specialCharacters]="['x', '.']" 
       [clearIfNotMatch]="true" 
       [showMaskTyped]="true" />

方案三：格式化数值为固定长度（简单但会补前导0） #

如果允许给短数值补前导0（比如2.3显示为02.3），可以在生成dimensions字符串时统一格式，让所有数值都符合固定掩码的长度要求，这是最省心的方案。

TypeScript 代码 #

let dimensions = null;
if (dimensionObject) {
  // 格式化函数：将数值转为「两位整数+一位小数」，不足补0
  const formatDimension = (num: number) => {
    return num.toFixed(1).padStart(4, '0'); // toFixed(1)保证一位小数，padStart补前导0到4位
  };
  dimensions = `${formatDimension(dimensionObject.length)}x${formatDimension(dimensionObject.width)}x${formatDimension(dimensionObject.height)}`;
}

此时模板仍使用原固定掩码mask="00.0x00.0x00.0"即可，数值和掩码完全匹配，不会错位。

注意事项 #

• 若使用动态掩码，确保在维度数据变化时（比如dimensionObject更新）触发掩码重新生成（如ngOnChanges）。
• 自定义掩码函数需要考虑输入过程中的各种情况（比如用户还没输入小数点、只输入了部分数值），避免出现异常掩码。
• 可以配合表单验证器，确保输入的数值符合「整数+一位小数」的格式，提升用户体验。

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