本文详解如何在 angular 中实现输入内容的实时掩码处理，将用户输入的前8位数字替换为“x”，保留后4位可见，并解决双向绑定失效导致的原始值丢失问题。
本文详解如何在 angular 中实现输入内容的实时掩码处理，将用户输入的前8位数字替换为“x”，保留后4位可见，并解决双向绑定失效导致的原始值丢失问题。
在 Angular 应用中，对敏感输入（如银行卡号、身份证号）进行局部掩码展示是常见需求。例如：用户输入 123456789012，界面应显示 XXXXXXXX9012，但组件内部仍需完整保留原始值用于校验或提交。然而，若仅使用 [value] 单向绑定配合 (input) 事件手动更新，会导致原始输入值（unmaskedInput）被意外覆盖——正如问题中所示：unmaskedInput 最终也变成了掩码后的字符串。
根本原因在于：[value]="maskedInput" 是单向数据绑定，它只将 maskedInput 的值推送到 DOM，但无法将用户实际输入同步回 TypeScript 变量；而 event.target.value 在 (input) 触发时读取的是当前 <input> 元素的显示值（即已被 maskedInput 覆盖后的值），而非用户真实键入的原始序列。
✅ 正确解法：使用 ngModel 实现真正的双向绑定，确保 unmaskedInput 始终反映用户原始输入：
<input type="text" [(ngModel)]="unmaskedInput" (input)="onInput($event)" maxlength="12" placeholder="请输入12位数字（前8位将被掩码）">
对应组件逻辑需同步优化，避免冗余赋值与潜在截断错误：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
unmaskedInput: string = '';
maskedInput: string = '';
onInput() {
// 确保只处理数字，且长度不超过12
const cleanValue = this.unmaskedInput.replace(/\D/g, '').slice(0, 12);
if (cleanValue.length <= 8) {
this.maskedInput = 'X'.repeat(cleanValue.length);
} else {
const visiblePart = cleanValue.substring(8);
this.maskedInput = 'X'.repeat(8) + visiblePart;
}
}
}? 关键注意事项：
- 必须导入 FormsModule：在 AppModule 中添加 import { FormsModule } from '@angular/forms'; 并将其加入 imports: [...] 数组，否则 ngModel 将无法工作；
- 避免在 (input) 中直接操作 event.target.value：因 ngModel 已接管值同步，直接读取 event.target.value 可能引发竞态（尤其在快速输入时）；
- 增强健壮性：示例中加入了非数字字符过滤（.replace(/\D/g, '')）和长度截断（.slice(0, 12)），防止非法输入破坏掩码逻辑；
- 如使用响应式表单：可改用 FormControl 配合 valueChanges 监听，代码更可测试，但需引入 ReactiveFormsModule。
最终效果：输入框显示掩码结果（如 XXXXXXXX9012），unmaskedInput 始终保存原始纯净值（123456789012），maskedInput 仅用于展示，二者职责清晰、互不干扰——这才是 Angular 数据流设计的最佳实践。
