今天我们要介绍的是一个非常实用的 npm 包 ngx-tel-input，它可以帮助我们在前端页面中快速添加一个电话号码输入框，支持国际电话格式和自动区号选择等功能，使用非常方便。
安装和引入
首先，我们需要在项目中安装 ngx-tel-input 包，在命令行中输入以下命令：
npm install ngx-tel-input --save
安装完成后，我们需要在使用的组件中引入：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------
-----------
-------- -
--------------
------------------
--
--
------ ----- --------- - -然后在 HTML 模板中使用指令 ngx-tel-input 创建一个电话号码输入框：
<ngx-tel-input [(ngModel)]="phoneNumber"></ngx-tel-input>
自定义配置
ngx-tel-input 提供了一系列可配置的选项，我们可以自定义国家区域码、控制是否显示搜索功能、设置自动区号选择等。
选择国家区域码
默认情况下，ngx-tel-input 会自动根据用户的 IP 地址选择默认的国家区域码，但我们也可以手动指定所需的区域码，例如：
<ngx-tel-input [(ngModel)]="phoneNumber" [selectedCountryCode]="'CN'"> </ngx-tel-input>
这样就会默认选择中国的区域码。
隐藏搜索功能
默认情况下，ngx-tel-input 会在下拉框中显示所有可选区域码列表，并可通过搜索框快速查找，但如果我们不需要这个功能，可以将 searchable 设置为 false：
<ngx-tel-input [(ngModel)]="phoneNumber" [searchable]="false"> </ngx-tel-input>
这样就会隐藏搜索框和下拉框。
自动区号选择
默认情况下，如果用户输入的号码不带有国家区域码，ngx-tel-input 会自动根据用户所在的国家选择号码的区域码，这个功能非常实用，但有时也可能带来一些混淆，因此我们可以手动关闭这个功能：
<ngx-tel-input [(ngModel)]="phoneNumber" [autoPlaceholder]="false"> </ngx-tel-input>
示例代码
最后，我们来看一下完整的示例代码：
<ngx-tel-input [(ngModel)]="phoneNumber" [selectedCountryCode]="'CN'" [searchable]="false" [autoPlaceholder]="false"> </ngx-tel-input>
以上代码表示创建一个输入框，国家区域码选择中国，隐藏搜索功能，关闭自动区号选择功能。这个输入框的值双向绑定到了组件的 phoneNumber 属性上。
总结
ngx-tel-input 是一个非常实用的 npm 包，可以帮助我们在前端页面中快速添加一个电话号码输入框，支持国际电话格式和自动区号选择等功能，使用非常方便。在使用时，我们可以根据需要进行自定义配置，更好地满足项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc181e8991b448dd171