如何将libphonenumber-js的AsYouType()绑定到Angular响应式表单ion-input？

你的问题核心在于每次触发格式化时都新建AsYouType实例，并且直接基于已格式化的字符串重新处理，导致退格时重复添加括号，同时光标位置丢失引发循环触发。以下是正确的绑定实现方式：

1. 复用AsYouType实例，维护输入状态 #

不要在每次格式化时新建AsYouType对象，而是在组件初始化时创建实例，确保它能跟踪输入的完整状态：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AsYouType } from 'libphonenumber-js';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  demographicsForm = new FormGroup({
    phone: new FormControl('', [Validators.required])
  });
  // 声明AsYouType实例
  private phoneFormatter: AsYouType;

  ngOnInit(): void {
    // 初始化格式化实例，指定国家码
    this.phoneFormatter = new AsYouType('US');
  }
}

2. 改用ionInput事件，实时响应输入 #

ionChange仅在输入框失去焦点或回车时触发，无法满足实时格式化需求，改用ionInput监听每一次按键输入：

<ion-item>
  <ion-label position="stacked">Phone *</ion-label>
  <ion-input (ionInput)="onPhoneInput($event)" formControlName="phone"></ion-input>
</ion-item>

3. 优化格式化逻辑，处理光标位置 #

关键是提取纯数字进行格式化，避免基于已格式化的带符号字符串重复处理，同时恢复光标位置，避免用户体验变差：

onPhoneInput(event: Event): void {
  const inputElement = event.target as HTMLInputElement;
  const rawInput = inputElement.value;
  // 提取输入中的所有数字字符，过滤非数字内容
  const pureDigits = rawInput.replace(/\D/g, '');

  // 重置格式化实例，重新输入所有数字生成正确格式
  this.phoneFormatter.reset();
  let formattedNumber = '';
  for (const digit of pureDigits) {
    formattedNumber = this.phoneFormatter.input(digit);
  }

  // 计算光标位置偏移，避免格式化后光标跳到末尾
  const originalCursorPos = inputElement.selectionStart;
  // 原输入中光标前的非数字数量
  const nonDigitsBeforeCursor = (rawInput.slice(0, originalCursorPos).match(/\D/g) || []).length;
  // 格式化后光标前的非数字数量
  const formattedNonDigitsBeforeCursor = (formattedNumber.slice(0, originalCursorPos - nonDigitsBeforeCursor).match(/\D/g) || []).length;
  // 计算新光标位置
  const newCursorPos = originalCursorPos + (formattedNonDigitsBeforeCursor - nonDigitsBeforeCursor);

  // 更新表单值，禁用事件触发避免循环
  this.demographicsForm.get('phone')?.patchValue(formattedNumber, { emitEvent: false });

  // 异步恢复光标位置（等待Angular更新DOM）
  setTimeout(() => {
    inputElement.setSelectionRange(newCursorPos, newCursorPos);
  }, 0);
}

为什么这样能解决问题？ #

• 复用AsYouType实例：确保格式化逻辑能正确跟踪输入的完整状态，不会每次都从头开始解析。
• 基于纯数字格式化：不管用户输入/删除的是数字还是符号，都只保留有效数字重新生成格式，避免重复添加括号的循环问题。
• 光标位置处理：格式化后自动恢复光标到正确位置，保证用户输入和退格的操作体验和普通输入框一致。

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