Angular 2实现卡号输入框每4位自动添加连字符问题

嘿，我懂你遇到的困扰！控制台能输出格式化后的卡号，但输入框就是没反应，对吧？这主要是两个小问题导致的：输入框没和模型正确双向绑定，再加上处理逻辑的数据源不对。我一步步帮你搞定：

1. 先修正HTML的ngModel绑定 #

你的输入框只加了(ngModelChange)事件，但缺了关键的双向绑定指令[(ngModel)]——这就意味着输入框的值和storeData.iban_no完全没关联，自然修改模型后输入框不会同步更新。

修改后的HTML代码：

<input #ibanInput type="text" name="din" [(ngModel)]="storeData.iban_no" (ngModelChange)="mychange($event, ibanInput)" class="form-control">

这里我加了模板引用变量#ibanInput，后面用来处理光标位置，避免用户输入时光标突然跳到末尾，提升体验。

2. 优化TypeScript的处理逻辑 #

原来的代码里，你基于storeData.iban_no来做格式化，但ngModelChange的参数$event才是输入框的最新值，用旧值处理会导致逻辑混乱。另外，我们还可以过滤非数字字符，确保输入的有效性。

修改后的.ts代码：

mychange(val: string, inputElement?: HTMLInputElement): void {
  // 移除所有已有的连字符
  const cleanedValue = val.replace(/-/g, '');
  // 过滤掉非数字字符（可选但推荐，保证输入只有数字）
  const numericValue = cleanedValue.replace(/\D/g, '');
  // 每4位分割并添加连字符，空值时返回空字符串
  const formattedValue = numericValue.match(/.{1,4}/g)?.join('-') || '';

  // 只有当格式化后的值和当前模型值不同时才赋值，避免不必要的变更检测
  if (this.storeData.iban_no !== formattedValue) {
    let cursorPosition: number | null = null;
    let cursorDiff = 0;
    
    // 记录当前光标位置和长度变化
    if (inputElement) {
      cursorPosition = inputElement.selectionStart;
      cursorDiff = formattedValue.length - val.length;
    }

    this.storeData.iban_no = formattedValue;

    // 异步调整光标位置，确保视图更新后再设置
    if (inputElement && cursorPosition !== null) {
      setTimeout(() => {
        inputElement.setSelectionRange(cursorPosition + cursorDiff, cursorPosition + cursorDiff);
      }, 0);
    }
  }
}

为什么原来的代码不生效？ #

• 缺少双向绑定：没有[(ngModel)]，输入框和模型之间没建立数据同步通道，修改storeData.iban_no无法反映到输入框。
• 数据源错误：基于旧的storeData.iban_no处理，而不是输入框的最新值val，导致格式化逻辑用了过期数据，甚至可能出现循环更新。
• 光标体验问题：额外添加的光标位置处理，是为了避免用户输入时光标自动跳到末尾，让输入更流畅。

内容的提问来源于stack exchange，提问作者Aashiq Rathnadas