Ionic 如何将AsYouType()(libphonenumber-js)附加到React性Angular 离子输入字段?

ruoxqz4g  于 2023-02-01  发布在  Ionic
关注(0)|答案(1)|浏览(121)

我有一个ionic-input字段用来输入电话号码,它执行格式化,但是当用户输入区号并试图退格其中一个括号后,它会无限地添加它们,因为它会在每次按键变化时替换输入。
在libphonenumber-js演示中,它有一个字段,该字段的格式正确,并且允许正常的退格,因此我的结论是,我将AsYouType对象错误地附加到了该字段。
那么,我如何使用离子输入将这个正确地连接到我的React角形体上呢?
TS表单组声明:

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

TS电话更改():

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);
    }
}

超文本:

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

谢谢你。

a9wyjsp7

a9wyjsp71#

我不会将此标记为解决方案,因为它不优雅,我不相信使用了最好的设计。然而,这是我的临时变通方案。
它根据自动格式化检测电话号码的长度(即(555)是5个字符,(555)555是9个字符,包括空格),然后格式化或跳过格式化。

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;
    }
}

相关问题