Question

我正在使用ngx-intl-tel-input，以便在我的Angular 7项目中使用国际电话号码字段。

我希望能够通过以下任一方式设置下拉列表的默认国家/地区（以及相应的占位符）：

使用用户在另一个区域提供的国家/地区代码表格或
（如果未提供上述内容），请使用用户IP的国家/地区代码地址

根据该软件包的文档，我看不到一种设置默认国家/地区的方法，只有一种为下拉菜单设置首选国家/地区并自动选择该数组中的第一个国家的方法

除了将动态地将默认国家/地区的期望值动态注入preferredCountries数组的第一个索引中的显而易见的解决方法之外，是否还有其他实现方法的想法？

**更新** 我之所以不想为此使用preferredCountries数组，是因为我需要它动态更改。由于ngx-intl-tel-input组件通过实施preferredCountries

来设置OnInit中列出的国家，因此我一直无法找到一种方法来改变下拉菜单中的国家。

    ngOnInit() {

    this.fetchCountryData();

    if (this.preferredCountries.length) {
        this.preferredCountries.forEach(iso2 => {
            const preferredCountry = this.allCountries.filter((c) => {
                return c.iso2 === iso2;
            });

            this.preferredCountriesInDropDown.push(preferredCountry[0]);
        });
    }
    if (this.onlyCountries.length) {
        this.allCountries = this.allCountries.filter(c => this.onlyCountries.includes(c.iso2));
    }
    if (this.preferredCountriesInDropDown.length) {
        this.selectedCountry = this.preferredCountriesInDropDown[0];
    } else {
        this.selectedCountry = this.allCountries[0];
    }

如果您知道解决此问题的方法，我很乐意使用preferredCountries数组来实现所需的行为，但是上述情况目前阻止了我这样做。

Answer 1

如github上所示，您可以设置[preferredCountries]="[yourDefaultCountryCode]"，例如，这将显示英国：

<ngx-intl-tel-input 
    [cssClass]="'custom'" 
    [preferredCountries]="['gb']" <!-- THIS ONE -->
    [enablePlaceholder]="true"
    [enableAutoCountrySelect]="true"
    name="phone" 
    formControlName="phone"></ngx-intl-tel-input>

Answer 2

您可以使用 ng2-tel-input ，它适用于2+角度enter link description here

并将其用于Ex将埃及设置为默认国家 [ng2TelInputOptions] =“ {initialCountry：'eg'}”，“ eg”->“埃及”。

<input [(ngModel)]="Phone_Number" required type="tel" ng2TelInput (hasError)="hasError($event)" (ng2Tel[][1]Output)="getNumber($event)" (intlTelInputObject)="telInputObject($event)" (countryChange)="onCountryChange($event)" [ng2TelInputOptions]="{initialCountry: 'eg'}"/>

Answer 3

在 TS 中：

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

在 HTML 中：

<ngx-intl-tel-input [selectedCountryISO]="CountryISO.India" ...> </ngx-intl-tel-input>

如何使用ngx-intl-tel-input选择默认国家

3 个答案: