如何在Angular表单初始化时为表单值应用输入掩码？

• 方案一：直接在表单初始化时对初始值做格式化处理，适合掩码规则简单的场景
  先封装通用的手机号格式化工具函数，在创建FormControl时直接将初始值传入处理后赋值即可：

// 通用手机号格式化函数
function formatPhone(value: string): string {
  if (!value) return '';
  // 先移除所有非数字字符，避免脏值影响格式化效果
  const pureNumber = value.replace(/\D/g, '');
  if (pureNumber.length >= 10) {
    return `(${pureNumber.slice(0,3)}) ${pureNumber.slice(3,6)}-${pureNumber.slice(6,8)}-${pureNumber.slice(8,10)}`;
  }
  return value;
}

export class VisitComponent implements OnInit {
    public form: FormGroup;
    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.form = this.formBuilder.group({
            name: ['', [Validators.required]],
            // 直接传入处理后的格式化值作为初始值
            phone: [formatPhone('9991234567')] 
        });
    }
}

• 方案二：在现有掩码指令中新增初始化执行逻辑，适合不想重复维护两份格式化规则的场景
  修改你已经实现的输入掩码Directive，在ngOnInit生命周期中主动读取一次控件初始值执行格式化，不需要等待输入变更事件触发：

@Directive({
  selector: '[appPhoneMask]'
})
export class PhoneMaskDirective implements OnInit {
  constructor(
    private inputEl: ElementRef<HTMLInputElement>, 
    private ngControl: NgControl
  ) {}

  ngOnInit() {
    // 组件初始化阶段主动执行一次格式化
    const initVal = this.ngControl.value;
    if (initVal) {
      const formattedVal = this.formatInput(initVal);
      // emitEvent设为false可避免触发不必要的valueChanges事件
      this.ngControl.control.setValue(formattedVal, { emitEvent: false });
      this.inputEl.nativeElement.value = formattedVal;
    }
  }

  // 你原有处理输入变更的格式化逻辑
  @HostListener('input', ['$event.target.value'])
  onInputChange(value: string) {
    const formattedVal = this.formatInput(value);
    this.ngControl.control.setValue(formattedVal, { emitEvent: false });
    this.inputEl.nativeElement.value = formattedVal;
  }

  private formatInput(value: string): string {
    if (!value) return '';
    const pureNumber = value.replace(/\D/g, '');
    if (pureNumber.length >= 10) {
      return `(${pureNumber.slice(0,3)}) ${pureNumber.slice(3,6)}-${pureNumber.slice(6,8)}-${pureNumber.slice(8,10)}`;
    }
    return value;
  }
}

模板中正常绑定指令即可：

<input formControlName="phone" appPhoneMask>

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