Angular掩码输入组件问题求助：编辑异常与初始掩码不显示

问题场景与现有问题 #

需求 #

• 创建场景：输入12345678时，UI显示1234****，向后台传输原始数据12345678
• 编辑场景：输入框初始显示1234****，保存时传输新增的原始数据，创建与编辑复用同一组件

当前问题 #

• 编辑时删除内容无效，仅能新增字符
• 进入编辑时输入框初始无掩码显示，需清空后才出现

问题原因分析 #

1. 初始掩码未渲染：ngOnInit中仅赋值actualValue，未根据初始值生成并设置掩码到输入框
2. 删除操作未处理：原maskInput方法只处理了新增字符的情况，未监听退格/删除等操作，导致actualValue无法同步减少，输入框显示也无法更新
3. 双向绑定冲突：父组件通过handleValueChange调用setValue会触发组件内的循环更新，且未监听control的valueChanges来同步实际值与掩码显示

修复后的掩码输入组件代码 #

mask.component.ts #

import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-input-mask',
  templateUrl: './mask.component.html',
})
export class InputMaskComponent implements OnInit, OnDestroy {
  @Input() name: string;
  @Input() control: FormControl;
  @Input() e2eName: string;
  @Output() valueChange = new EventEmitter<string>();
  
  actualValue = '';
  private valueSubscription: Subscription;

  ngOnInit() {
    // 初始化实际值并渲染初始掩码
    this.actualValue = this.control.value || '';
    this.updateMaskedDisplay();
    
    // 监听FormControl值变化，同步实际值（处理父组件主动赋值场景）
    this.valueSubscription = this.control.valueChanges.subscribe(val => {
      if (val !== this.actualValue) {
        this.actualValue = val || '';
        this.updateMaskedDisplay();
      }
    });
  }

  ngOnDestroy() {
    // 清理订阅避免内存泄漏
    this.valueSubscription?.unsubscribe();
  }

  emitActualValue(value: string): void {
    this.valueChange.emit(value);
  }

  maskInput(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    const inputValue = inputElement.value;
    
    // 根据输入框长度变化判断新增/删除操作
    const lengthDiff = inputValue.length - this.getMaskedLength(this.actualValue);
    if (lengthDiff > 0) {
      // 新增字符：提取输入框中新增的真实内容
      const addedChars = inputValue.slice(-lengthDiff);
      this.actualValue += addedChars;
    } else if (lengthDiff < 0) {
      // 删除字符：截断实际值
      this.actualValue = this.actualValue.slice(0, this.actualValue.length + lengthDiff);
    }
    
    this.emitActualValue(this.actualValue);
    this.updateMaskedDisplay();
    
    // 阻止默认事件，避免FormControl自动同步掩码值
    event.preventDefault();
  }

  private updateMaskedDisplay(): void {
    const inputElement = document.querySelector(`[data-e2e="${this.e2eName}"]`) as HTMLInputElement;
    if (inputElement) {
      inputElement.value = this.generateMaskedValue(this.actualValue);
    }
  }

  private generateMaskedValue(value: string): string {
    if (value.length <= 4) {
      return value;
    }
    return value.substring(0, 4) + '*'.repeat(value.length - 4);
  }

  private getMaskedLength(value: string): number {
    return this.generateMaskedValue(value).length;
  }
}

mask.component.html #

<label>
  <span>{{ name }}</span>
  <div class="control">
    <input
      [formControl]="control"
      [attr.data-e2e]="e2eName"
      type="text"
      class="input"
      (input)="maskInput($event)"
      (paste)="maskInput($event)"
    />
  </div>
</label>

使用组件的注意事项 #

1. 移除冗余双向绑定代码：父组件无需再通过handleValueChange调用setValue，组件内部已自动同步control的值，避免循环更新：

// 删除以下代码
// handleValueChange(value: string): void {
//   this.maskedControl.setValue(value);
// }

2. 确保初始值正确获取：从API获取初始值后，直接赋值给maskedControl即可，组件会自动渲染掩码：

get maskedControl(): AbstractControl {
  // 示例：从表单组中获取对应控件
  return this.formGroup.get('targetField');
}

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