Angular 14中NgxIntlTelInputModule编辑手机号显示异常问题

我正在开发Angular项目，使用NgxIntlTelInputModule处理国际手机号。升级到Angular 14后，模块出现功能异常：编辑已保存的带国家码的手机号时，国家码同时显示在国家码栏和本地号码栏，而预期仅应显示在国家码栏。

组件简化代码 #

import { SearchCountryField, CountryISO } from "ngx-intl-tel-input";

ngOnInit(): void {
  this.phoneForm = this.fb.group({
    id: new FormControl(0),    
    phone: new FormControl('+91 9876543210', [Validators.required]),
  })
}

submit() {
  console.log(this.phoneForm.value)
}

edit(record: any) {
  this.phoneForm.patchValue({
    phone: record
  })
  console.log(record)
}

HTML代码 #

<div style="margin: 50px">
      <form [formGroup]="phoneForm" (ngSubmit)=submit()>
        <div class="mb-2">
          <ngx-intl-tel-input [enableAutoCountrySelect]="true" [enablePlaceholder]="true"
                             [searchCountryFlag]="true" [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
                             [selectFirstCountry]="false" [maxLength]="15" 
                             [phoneValidation]="true" [separateDialCode]="true" name="phone" formControlName="phone">
          </ngx-intl-tel-input>
        </div>
        <div class="mb-2">
          <button type="submit">submit</button>
          <br/>
          <button (click)="edit('+91 9876543210')">edit</button>
          <br/>
          <button (click)="reset()">Reset</button>
        </div>
      </form>     
    </div>

使用的包版本 #

"bootstrap": "^5.3.2",
"google-libphonenumber": "^3.2.33",
"intl-tel-input": "^16.0.5",
"jquery": "^3.7.1",
"ngx-bootstrap": "^11.0.2",
"ngx-intl-tel-input": "^3.2.0",

显示情况 #

• 异常显示：国家码（如+91）同时出现在左侧国家选择器的拨号码区域和右侧本地号码输入框中，输入框内显示完整的"+91 9876543210"
• 预期显示：国家码仅在左侧国家选择器的拨号码区域显示，右侧本地号码输入框仅显示纯本地号码"9876543210"

内容的提问来源于stack exchange，提问作者Abhinay kumar Mishra