Angular13中Ng2TelInput国家代码绑定及样式修复问题

我在Angular 13应用中使用Ng2TelInput组件，尝试绑定国家代码与手机号，相关代码如下：

HTML代码 #

<div class="col-12">
    <div><label for="inputPhone" class="form-label">Phone</label></div>
    <input type="number" class="custom-tel-input form-control" ng2TelInput [ng2TelInputOptions]="ng2TelInputOptions"
                (countryChange)="onCountryChange($event)" formControlName="phone" ></div>

TypeScript代码 #

import { Ng2TelInput} from 'ng2-tel-input';

countryCode: string = "";
countryCodeName: string = '';

ng2TelInputOptions = {
    initialCountry: this.countryCodeName
}

表单绑定代码 #

this.ng2TelInputOptions = { ...this.ng2TelInputOptions, initialCountry: obj["country_code"] };
this.profileForm.setValue({
    firstName: obj["first_name"],
    lastName: obj["last_name"],
    username: obj["username"],
    email: obj["email"],
    phone: obj["phone_number"],
    countryCode: obj["country_code"],
})

遇到两个问题：

1. 表单加载时国家代码未显示，能否通过国家代码在Ng2TelInput中获取对应国家的iso2值？
2. 改用Ng2TelInput后手机号字段的内边距样式塌陷，添加以下CSS未解决问题：

:host ::ng-deep .iti {
  width: 100%;
}

.iti--allow-dropdown {
  width: 100% !important;
}

问题1：通过国家代码获取对应ISO2值并初始化国家选择 #

Ng2TelInput依赖的intl-tel-input库内置了国家数据，可直接通过国家代码反向查找对应的ISO2代码。

解决步骤： #

1. 引入内置国家数据：

import { countries } from 'ng2-tel-input/build/data/countries';

2. 编写转换函数，根据国家代码（带+号）获取ISO2值：

getCountryIso2ByCode(countryCode: string): string {
  // 移除+号后匹配dialCode字段
  return countries.find(country => country.dialCode === countryCode.replace('+', ''))?.iso2 || '';
}

3. 表单初始化时转换代码并更新配置：

// 假设obj["country_code"]格式为"+86"这类带+号的代码
const iso2Code = this.getCountryIso2ByCode(obj["country_code"]);
this.ng2TelInputOptions = { ...this.ng2TelInputOptions, initialCountry: iso2Code };

// 注意：phone字段需传入不带国家代码的纯手机号，避免组件重复添加前缀
this.profileForm.setValue({
  firstName: obj["first_name"],
  lastName: obj["last_name"],
  username: obj["username"],
  email: obj["email"],
  phone: obj["phone_number"].replace(obj["country_code"], ''),
  countryCode: obj["country_code"],
})

说明：initialCountry参数要求传入ISO2代码（如"cn"、"us"），而非国家代码（如"+86"），必须转换后才能正确初始化国家选择器。

问题2：修复内边距样式塌陷问题 #

原CSS仅设置了宽度，未处理组件内部输入框的样式继承。需针对Ng2TelInput生成的DOM结构补充样式：

修正后的CSS： #

:host ::ng-deep .iti {
  width: 100%;
}

:host ::ng-deep .iti--allow-dropdown {
  width: 100% !important;
}

/* 对齐form-control的内边距样式 */
:host ::ng-deep .iti__tel-input {
  padding: 0.375rem 0.75rem; /* 与bootstrap form-control内边距保持一致 */
  width: 100%;
  border: inherit;
  border-radius: inherit;
}

/* 可选：调整国家选择按钮的内边距 */
:host ::ng-deep .iti__flag-container {
  padding: 0 0.5rem;
}

说明：Ng2TelInput会将原始input替换为包含国家选择器的容器，原始form-control样式不会自动继承到新生成的输入框，需显式设置.iti__tel-input的内边距、边框等属性，与表单控件样式对齐。

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