如何将 AsYouType() (libphonenumber-js) 附加到反应性 Angular 离子输入场？

Question

我有一个离子输入字段来输入电话号码。 它执行格式化，但在用户输入区号并尝试退格其中一个括号后，它会无限地继续添加它们，因为它会在每次按键更改时替换输入。

在 libphonenumber-js 演示中，它有一个字段可以正确格式化并允许正常退格。 所以我的结论是我将 AsYouType object 错误地附加到该字段。

那么如何使用离子输入将其正确附加到我的反应式 Angular 表单中呢？

TS表格组申报：

 demographicsForm = new FormGroup({
    phone: new FormControl('', [Validators.required])

TS OnPhoneChange():

onPhoneChange() { //format phone number as user types. 
    if (this.demographicsForm.get('phone').value ) {
        let formattedTel = new AsYouType('US').input(this.demographicsForm.get('phone').value);
        const phoneControl = this.demographicsForm.get('phone');
        phoneControl.setValue(formattedTel);
    }
}

HTML：

<ion-item>
    <ion-label position="stacked">Phone *</ion-label>
    <ion-input (ionChange)="onPhoneChange()" formControlName="phone" ></ion-input>
</ion-item>

谢谢。

Answer 1

我不会将此标记为解决方案，因为它不够优雅，而且我不认为它使用了最佳设计。 但是，这是我的临时解决方法。

它根据自动格式化检测电话号码的长度（即 (555) 是五个字符，(555) 555 是包括空格在内的九个字符），然后格式化或跳过格式化。

onPhoneChange() { 
    if (this.demographicsForm.get('phone').value && this.phoneParenthesis == false) {
        let formattedTel = new AsYouType('US').input(this.demographicsForm.get('phone').value);
        const phoneControl = this.demographicsForm.get('phone');
        phoneControl.setValue(formattedTel); 
        this.phoneParenthesis = true; 
    }
    if(this.demographicsForm.get('phone').value.length >= 6){
        let formattedTel = new AsYouType('US').input(this.demographicsForm.get('phone').value);
        const phoneControl = this.demographicsForm.get('phone');
        phoneControl.setValue(formattedTel);
    }
    if(this.demographicsForm.get('phone').value.length < 3){
        this.phoneParenthesis = false;
    }
}