Angular 输入框动态掩码：隐藏前8位数字并显示后4位（X掩码实现）-js教程-PHP中文网

本文详解如何在 angular 中实现输入内容的实时掩码处理，即用户输入12位数字时自动隐藏前8位为'x'、保留后4位可见，并正确分离原始值与掩码值，避免双向绑定失效问题。

本文详解如何在 angular 中实现输入内容的实时掩码处理，即用户输入12位数字时自动隐藏前8位为'x'、保留后4位可见，并正确分离原始值与掩码值，避免双向绑定失效问题。

在 Angular 应用中，对敏感字段（如银行卡号、身份证号）进行前端掩码展示是常见需求。典型场景之一是：用户输入 12 位数字，界面仅显示 XXXXXXXX1234（前 8 位用 X 遮盖，后 4 位明文显示），但组件内部仍需完整保留原始输入值用于提交或校验。

然而，若直接使用 [value] + (input) 的单向绑定组合（如下所示），会导致“原始值被覆盖”问题：

<input type="text" maxlength="12">

原因在于：[value] 是单向数据绑定，它只将 maskedInput 推送至 DOM，但不会将用户输入同步回组件属性；而 (input) 事件中读取的 event.target.value 实际是已被 maskedInput 覆盖后的显示值（即 XXXXXXXX1234），而非用户真实键入的原始字符串。这正是提问者观察到 unmaskedInput 也显示掩码内容的根本原因。

✅ 正确解法：使用 ngModel 实现真正的双向绑定

ngModel 在模板中建立 unmaskedInput 与输入框的双向同步，确保：

用户输入实时更新 unmaskedInput
onInput() 仅负责计算并更新 maskedInput（用于显示），不干扰原始值

✅ 推荐实现（含完整代码）

1. 模板（HTML）

<input type="text" maxlength="12" placeholder="请输入12位数字（如：123456789012）"><p><strong>掩码显示：</strong>{{ maskedInput || '——' }}</p>
<p><strong>原始值（用于提交）：</strong>{{ unmaskedInput || '——' }}</p>

2. 组件（TypeScript）

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  unmaskedInput: string = '';
  maskedInput: string = '';

  onInput(): void {
    const raw = this.unmaskedInput || '';

    // 仅处理纯数字且长度 ≤ 12 的输入
    if (!/^\d*$/.test(raw) || raw.length > 12) {
      // 可选：自动清理非法字符或截断
      this.unmaskedInput = raw.replace(/\D/g, '').slice(0, 12);
      return;
    }

    const digitsBeforeMasking = raw.substring(0, 8);
    const remaining = raw.substring(8);

    this.maskedInput = 
      digitsBeforeMasking.replace(/\d/g, 'X') + remaining;
  }
}

⚠️ 关键注意事项

必须导入 FormsModule：在 AppModule 中添加 import { FormsModule } from '@angular/forms'; 并将其加入 imports: [...] 数组，否则 ngModel 将无法识别。
避免在 (input) 中直接赋值 unmaskedInput：[(ngModel)] 已接管同步，手动赋值会引发冲突或脏检查异常。
输入校验建议：示例中加入了正则过滤非数字字符，并限制最大长度，提升用户体验与数据可靠性。
如使用响应式表单：可改用 formControlName + FormControl.valueChanges 监听，逻辑类似，但需配合 ReactiveFormsModule。