本文详解如何在 angular 中实现输入内容的实时掩码处理，即用户输入12位数字时自动隐藏前8位为'x'、保留后4位可见，并正确分离原始值与掩码值，避免双向绑定失效问题。
本文详解如何在 angular 中实现输入内容的实时掩码处理，即用户输入12位数字时自动隐藏前8位为'x'、保留后4位可见，并正确分离原始值与掩码值，避免双向绑定失效问题。
在 Angular 应用中，对敏感字段（如银行卡号、身份证号）进行前端掩码展示是常见需求。典型场景之一是：用户输入 12 位数字，界面仅显示 XXXXXXXX1234（前 8 位用 X 遮盖，后 4 位明文显示），但组件内部仍需完整保留原始输入值用于提交或校验。
然而，若直接使用 [value] + (input) 的单向绑定组合（如下所示），会导致“原始值被覆盖”问题：
<input type="text" [value]="maskedInput" (input)="onInput($event)" maxlength="12">
原因在于：[value] 是单向数据绑定，它只将 maskedInput 推送至 DOM，但不会将用户输入同步回组件属性；而 (input) 事件中读取的 event.target.value 实际是已被 maskedInput 覆盖后的显示值（即 XXXXXXXX1234），而非用户真实键入的原始字符串。这正是提问者观察到 unmaskedInput 也显示掩码内容的根本原因。
✅ 正确解法：使用 ngModel 实现真正的双向绑定
ngModel 在模板中建立 unmaskedInput 与输入框的双向同步，确保：
- 用户输入实时更新 unmaskedInput
- onInput() 仅负责计算并更新 maskedInput（用于显示），不干扰原始值
✅ 推荐实现（含完整代码）
1. 模板（HTML）
<input
type="text"
[(ngModel)]="unmaskedInput"
(input)="onInput()"
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。
✅ 总结
实现安全、可控的输入掩码，核心在于分离「显示逻辑」与「数据源」：
? unmaskedInput 是唯一可信的数据源（由 ngModel 双向绑定保障）；
? maskedInput 是纯派生状态，仅用于视图渲染；
? onInput() 是纯计算函数，不修改源数据，只更新视图所需掩码。
该模式兼顾可维护性、可测试性与 Angular 最佳实践，适用于各类动态掩码场景（如手机号 138****1234、密码强度提示等）。
