我在Angular项目里用ngx-intl-tel-input库处理手机号输入框，还封装了一个可复用的手机号组件，把父组件的FormControl传给它使用。

下面是我的代码：

子组件 component.ts #

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { CountryISO, PhoneNumberFormat, SearchCountryField } from 'ngx-intl-tel-input';

@Component({
  selector: 'app-new-phone-no-field-v1',
  templateUrl: './new-phone-no-field-v1.component.html',
  styleUrl: './new-phone-no-field-v1.component.css'
})
export class NewPhoneNoFieldV1Component {
  @Input() control!: FormControl;
  @Input() separateDialCode: boolean = false;
  @Input() maxLength: number = 15;
  @Input() phoneValidation: boolean = true;

  preferredCountries: CountryISO[] = [
    CountryISO.UnitedStates,
    CountryISO.UnitedKingdom,
    CountryISO.India,
    CountryISO.Australia,
    CountryISO.Philippines,
    CountryISO.Thailand,
    CountryISO.SouthAfrica,
    CountryISO.Panama,
    CountryISO.Mexico,
    CountryISO.Indonesia,
    CountryISO.Canada,
    CountryISO.DominicanRepublic,
  ];
  searchCountryField: SearchCountryField[] = [
    SearchCountryField.Iso2,
    SearchCountryField.Name
  ];
  phoneNumberFormat: PhoneNumberFormat = PhoneNumberFormat.National;
  selectedCountryISO: CountryISO = CountryISO.UnitedStates;
}

子组件 Component.html #

<div class="intl-tel-input-wrapper">
    <ngx-intl-tel-input
      [cssClass]="'custom'"
      [onlyCountries]="preferredCountries"
      [enableAutoCountrySelect]="true"
      [enablePlaceholder]="true"
      [searchCountryFlag]="true"
      [searchCountryField]="searchCountryField"
      [selectFirstCountry]="false"
      [selectedCountryISO]="selectedCountryISO"
      [maxLength]="maxLength"
      [phoneValidation]="phoneValidation"
      [separateDialCode]="true"
      [numberFormat]="phoneNumberFormat"
      name="phone"
      [formControl]="control">
    </ngx-intl-tel-input>
    <div *ngIf="control.touched && control.invalid" class="error-messages">
      <div *ngIf="control.errors?.required">Phone number is required.</div>
      <div *ngIf="!control.errors?.validatePhoneNumber?.valid">Invalid phone number.</div>
    </div>
  </div>

父组件 Parent.component.html #

<app-new-phone-no-field-v1 
  [control]="$any(userForm.get('phone'))"
  [separateDialCode]="true">
</app-new-phone-no-field-v1>

<div class="error error-msg">
  <div *ngIf="f.phone.errors?.required">
    Phone Number is required.
  </div>
  <div *ngIf="f.phone.errors?.pattern">
    Phone Number is invalid.
  </div>
</div>

API返回的手机号格式为：+919876543210，我用以下代码把数据patch到表单中：

this.userForm.patchValue({ phone: data.phone });

遇到的问题： #

• 国家码重复显示：UI上拨号码下拉框里会显示一次国家码，输入框里的手机号也会带国家码，比如+91既出现在下拉框，输入框还显示+919876543210
• 自动格式化失效：选中不同国家后，手机号不会自动适配对应格式，比如选美国时，无法把号码格式化成(201)-555-1234样式

已尝试的解决方法： #

• 手动设置FormControl的value属性
• 对照官方文档检查ngx-intl-tel-input的配置参数，确保符合要求

想请教大家怎么解决这两个问题，让：

• 国家码不再重复显示
• 手机号能根据选中的国家自动完成格式化？

备注：内容来源于stack exchange，提问作者tyler