本文介绍如何在 angular 中正确实现输入掩码功能——将用户输入的 12 位数字（如银行卡号）自动隐藏前 8 位为 'x'，仅显示后 4 位，同时确保原始值与掩码值双向独立、准确同步。
本文介绍如何在 angular 中正确实现输入掩码功能——将用户输入的 12 位数字（如银行卡号）自动隐藏前 8 位为 'x'，仅显示后 4 位，同时确保原始值与掩码值双向独立、准确同步。
在 Angular 中实现输入掩码（例如 XXXXXXXX1234）看似简单，但若使用单向绑定 [value] 配合 (input) 事件手动更新，极易导致数据流混乱——正如问题中所示：unmaskedInput 被错误地赋值为已掩码后的字符串，丧失原始输入信息。
根本原因在于：[value]="maskedInput" 是单向绑定，它只控制视图显示，却不接收用户输入的真实值；而 (input) 事件中读取的 event.target.value 实际上是当前 <input> 元素的渲染后值（即 maskedInput），而非用户刚键入的原始字符。因此，this.unmaskedInput = event.target.value 实质上将掩码结果又赋给了原始字段，形成逻辑闭环错误。
✅ 正确做法是：让原始输入值（unmaskedInput）真实承载用户键入内容，并通过计算属性或响应式逻辑生成掩码视图。推荐使用 ngModel 双向绑定（需导入 FormsModule）来可靠同步原始输入：
<!-- app.component.html -->
<input
type="text"
[(ngModel)]="unmaskedInput"
(input)="onInput()"
maxlength="12"
placeholder="请输入12位数字（如：123456789012）">
<p>掩码显示: {{ maskedInput }}</p>
<p>原始值: {{ unmaskedInput }}</p>// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
unmaskedInput: string = '';
maskedInput: string = '';
onInput(): void {
// 确保只处理数字，且截取最多12位
const cleanValue = this.unmaskedInput.replace(/\D/g, '').slice(0, 12);
this.unmaskedInput = cleanValue;
// 前8位替换为'X'，后4位保留（不足则全显）
const visiblePart = cleanValue.length > 8 ? cleanValue.substring(8) : cleanValue;
const maskedPart = 'X'.repeat(Math.min(8, cleanValue.length));
this.maskedInput = maskedPart + visiblePart;
}
}? 关键注意事项：
- 必须在 AppModule 中导入 FormsModule，否则 ngModel 不可用；
- onInput() 中优先对 unmaskedInput 做清洗（去除非数字字符）和长度限制，避免脏数据干扰掩码逻辑；
- 掩码逻辑应基于 cleanValue 计算，而非直接操作 event.target.value；
- 若项目已采用响应式表单（ReactiveFormsModule），可改用 FormControl + valueChanges 监听，配合 patchValue({ emitEvent: false }) 避免循环触发。
? 进阶提示：如需支持光标定位、粘贴处理或更复杂的格式化（如空格分隔 XXXX XXXX XXXX），建议封装为自定义 ControlValueAccessor 指令，实现真正可复用的掩码输入控件。
通过分离「原始数据源」与「展示派生值」，并依托 Angular 的双向绑定机制，即可稳健、可维护地实现安全敏感字段的前端掩码显示。
