Angular 5 实现输入框每4位数字后自动添加空格的问题

我来帮你搞定这个问题！你遇到的核心问题是同时使用了[(ngModel)]和[formControl]，这两个指令在Angular中会产生冲突——当你用formControl时，表单控件的状态完全由FormControl实例接管，ngModel的绑定会被忽略，所以哪怕你在代码里更新了this.id，输入框也不会同步显示格式化后的值。另外，我们还得优化光标位置，避免用户输入时光标跳到末尾，提升体验。

解决方案步骤 #

1. 移除双向绑定冲突

首先，我们选择用FormControl来管理表单控件（这是Angular表单的最佳实践），所以要去掉HTML里的[(ngModel)]绑定。

2. 修改格式化逻辑并同步FormControl值

更新你的.ts文件里的格式化函数，直接更新FormControl的值，同时处理光标位置：

import { FormControl } from '@angular/forms';

// 组件类中初始化FormControl
inputFormControl = new FormControl('');

mychange(val: string) {
  const inputElement = document.querySelector('.customerno') as HTMLInputElement;
  const cursorPosition = inputElement.selectionStart;
  
  // 1. 清除所有空格，只保留数字
  const cleanedValue = val.replace(/\s/g, '');
  // 2. 每4位添加空格
  const formattedValue = cleanedValue.match(/.{1,4}/g)?.join(' ') || '';
  
  // 3. 计算格式化后的光标位置（避免光标跳到末尾）
  const originalSpacesBefore = (val.slice(0, cursorPosition).match(/\s/g) || []).length;
  const effectiveCursorPos = cursorPosition - originalSpacesBefore;
  const newSpacesCount = Math.floor(effectiveCursorPos / 4);
  const newCursorPosition = effectiveCursorPos + newSpacesCount;
  
  // 4. 更新FormControl的值，关闭事件触发避免循环
  this.inputFormControl.setValue(formattedValue, { emitEvent: false });
  
  // 5. 恢复光标位置
  setTimeout(() => {
    inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
  }, 0);
  
  console.log(formattedValue);
}

3. 更新HTML代码

去掉[(ngModel)]和(ngModelChange)，改用valueChanges监听输入变化（更符合响应式表单的设计）：

<input class="customerno" 
       [formControl]="inputFormControl" 
       (keydown.backspace)="onKeydown($event)" 
       maxlength="{{digit}}" 
       (keyup)="RestrictNumber($event)" 
       type="tel" 
       matInput 
       placeholder="Customer No. ">

然后在组件的ngOnInit里添加valueChanges监听：

ngOnInit() {
  this.inputFormControl.valueChanges.subscribe(val => {
    this.mychange(val);
  });
}

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

当你同时使用[(ngModel)]和[formControl]时，Angular会优先使用FormControl来管理控件状态，你更新this.id的操作并不会同步到FormControl的value中，所以输入框显示的还是FormControl原来的值，而控制台输出的是你处理后的chIbn，这就导致了视图和控制台不一致的情况。

额外提示 #

• 你的RestrictNumber函数要确保只允许输入数字，避免非数字字符干扰格式化逻辑。
• 如果不需要响应式表单，也可以选择只使用ngModel，去掉formControl，然后在mychange里更新this.id后，手动注入ChangeDetectorRef调用detectChanges()触发视图更新，但这种方式不如使用FormControl优雅。

内容的提问来源于stack exchange，提问作者Twisted reality