npm 包 @os33/ng2-tel-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

随着移动互联网的普及，电话号码成为了一种很常见的身份标识。在前端开发过程中，我们可能需要使用电话号码相关的控件。而 ng2-tel-input 则是一个好用的 Angular2+ 电话号码输入框组件。本文将介绍如何使用 ng2-tel-input，实现国际化电话号码输入，并对一些细节进行讲解。

安装及引入

首先，我们需要通过 npm 安装 ng2-tel-input。在项目的根目录下，打开命令行终端，运行如下命令即可：

npm install @os33/ng2-tel-input --save

接着，在需要使用 ng2-tel-input 的模块中，引入 Ng2TelInputModule 模块即可。示例如下：

import {Ng2TelInputModule} from '@os33/ng2-tel-input';

@NgModule({
    imports: [Ng2TelInputModule]
})
export class AppModule {}

使用

基本用法

使用 ng2-tel-input 时，我们只需要在模板中使用 ng2-tel-input 标签即可。示例如下：

<ng2-tel-input [ngModel]="myModel"></ng2-tel-input>

其中，myModel 为当前电话号码的值。

国际化

在电话号码的输入框中，通常需要区分国际电话号码和本地电话号码。为了实现国际化，我们需要引入一个名为 intl-tel-input 的 JavaScript 插件。

先安装 jquery 和 intl-tel-input：

npm install jquery intl-tel-input --save

然后在 angular.json 中的 scripts 数组中添加两个 JavaScript 文件的路径：

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/intl-tel-input/build/js/intlTelInput.min.js"
]

接着，在 ng2-tel-input 中使用 intl-tel-input 插件，示例如下：

<ng2-tel-input name="tel" #phone [allowDropdown]="true" [defaultCountry]="'auto'" [enableAutoCountrySelect]="true" [selectedCountryISO]="phone.selectedCountry.iso2" [preferredCountries]="['us', 'gb']" [onlyCountries]="['us', 'gb', 'cn']" [required]="true" [ngModel]="phoneValue"></ng2-tel-input>

上述代码中，我们使用了 intl-tel-input 的多个配置属性。例如，defaultCountry 表示默认的国家代码，每个国家都有一个对应的国家代码，例如美国是 us，中国是 cn 等。preferredCountries 表示常用的国家代码列表，这些国家代码将出现在下拉菜单中，以方便用户使用。

坑点

在使用 ng2-tel-input 进行国际化电话号码输入时，可能会遇到一些坑。下面是一些常见的坑点及解决方法。

1. 引入 JavaScript 文件顺序错误

我们需要注意在 angular.json 中的 scripts 数组中引入 JavaScript 文件的顺序。首先需要引入 jquery.min.js，然后才能引入 intlTelInput.min.js。否则会导致在使用 intlTelInput 时出现问题。

2. 在表单验证时，可以通过 `phone.valid` 或 `phone.invalid` 判断电话号码是否合法。

由于 ng2-tel-input 本身是用 Angular 内置的 ngModel 实现的，所以可以直接在 ngModel 上使用 Angular 表单验证。例如，我们可以通过 phone.valid 或 phone.invalid 判断电话号码是否合法。

3. 小写的国家代码

在 ng2-tel-input 中，国家代码必须是大写字母。如果你使用小写字母，可能会遇到无法选择国家的问题。因此，请确保国家代码使用的是大写字母。

示例代码

下面是完整的示例代码，演示了如何在项目中使用 ng2-tel-input，并进行国际化电话号码输入。

<!-- app.component.html -->
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <ng2-tel-input name="tel" #phone [allowDropdown]="true" [defaultCountry]="'auto'" [enableAutoCountrySelect]="true" [selectedCountryISO]="phone.selectedCountry.iso2" [preferredCountries]="['us', 'gb']" [onlyCountries]="['us', 'gb', 'cn']" [required]="true" [(ngModel)]="phoneValue" #phoneModel="ngModel"></ng2-tel-input>
    <button type="submit" [disabled]="form.invalid">Submit</button>
</form>

-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------

------------
  --------- -----------
  ------------ ----------------------
--
------ ----- ------------ -
  ------ ----------- -------
  
  -------------- -
    -- ------------ -
      ------------------ ------- ---------------------
    -
  -
-

总结

本文介绍了使用 ng2-tel-input 插件进行电话号码输入的方法，并讲解了国际化电话号码输入的细节，包括引入 intl-tel-input 插件、配置插件选项等。同时，还介绍了在使用 ng2-tel-input 过程中可能遇到的一些坑点及解决方法。通过本文的学习，读者应该能够掌握在 Angular2+ 项目中使用 ng2-tel-input 插件的方法，从而为开发工作提供帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60057d8a81e8991b448ec264

npm 包 @os33/ng2-tel-input 使用教程