Angular 4国际电话前缀输入框默认印度国旗设置问题

我之前也碰到过类似的坑，大概率是几个细节没捋清楚，给你梳理下排查和解决步骤：

1. 别搞混代码类型！印度的国家代码是IN #

文档里的defaultCountry要求的是ISO 3166-1 alpha-2国家代码（两位字母），而locale才是ISO 639-1的语言代码。印度的国家代码是IN，要是你不小心用了印地语的语言代码hi，肯定不会生效。

2. 正确绑定defaultCountry属性 #

确保在模板里把defaultCountry绑定成字符串值，示例代码如下：

<int-phone-prefix 
  formControlName="myPhone"
  [defaultCountry]="'IN'"
  [locale]="'en'" <!-- 可选，设置界面显示语言为英文 -->
></int-phone-prefix>

3. 检查表单控件的初始化 #

如果你的表单控件初始化时设置了非印度区号的号码，可能会覆盖默认国家的选中状态。建议初始化时留空，或者直接使用带印度区号的号码：

import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  phoneForm = new FormGroup({
    myPhone: new FormControl('') // 留空让组件自动应用默认国家，也可以写'+919876543210'
  });
}

4. 确认组件模块已正确导入 #

别忘了在你的Angular模块（比如AppModule或当前组件所在的模块）中导入对应的组件模块，示例如下：

import { IntPhonePrefixModule } from 'angular-int-phone-prefix'; // 按你实际安装的包名调整

@NgModule({
  imports: [
    // ...其他依赖模块
    IntPhonePrefixModule
  ]
})
export class AppModule { }

额外排查点 #

如果还是没生效，可以检查下组件版本是否存在已知bug，或者尝试设置preferredCountries把印度优先展示（不过defaultCountry本身应该直接选中它）：

<int-phone-prefix 
  formControlName="myPhone"
  [defaultCountry]="'IN'"
  [preferredCountries]="['IN', 'US', 'GB']"
></int-phone-prefix>

按照上面的步骤调整后，应该就能默认选中印度国旗了。

内容的提问来源于stack exchange，提问作者Anjali Jibhakate