在前端开发过程中，表单输入是我们经常要面对的问题之一。特别是在涉及到国际化的时候，不同国家的表单输入格式也会有所不同。例如在巴西，输入格式会带有一些特殊的规则。这时我们就可以使用 ngx-brazilian-inputs 这个 npm 包来解决这个问题。
介绍
ngx-brazilian-inputs 是一个开源的 npm 包，它提供了一些常见的巴西表单输入组件，如 CEP（邮政编码）、CPF（个人识别码）和 CNPJ（公司识别码）等。这些组件可以帮助我们在开发巴西的网站或应用时，更加方便高效地完成表单输入。
安装
在使用 ngx-brazilian-inputs 之前，你需要先安装 Angular。接下来，在你的项目目录下，使用以下命令来安装 ngx-brazilian-inputs：
npm install ngx-brazilian-inputs --save
使用
安装完 ngx-brazilian-inputs 后，你可以在你的 Angular 应用中引入它。例如，在你的模块文件中声明它：
-- -------------------- ---- -------
------ - ------------------------ - ---- -----------------------
-----------
-------- -
-- ---
------------------------
-
--
------ ----- --------- - -使用 CEP 组件
CEP（Cadastro de Pessoas Físicas）是巴西的邮政编码，使用 8 位数字表示。为了在应用中使用 CEP 组件，我们可以在我们的组件中引入它，并在 HTML 模板中使用它。例如，在你的组件文件中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -
------- -------
-------------- ----------------------------------
-
--
------ ----- ------------ -
---- -------
-然后这里是 ngx-cep-input 的使用效果：
使用 CPF 组件
CPF（Cadastro de Pessoas Físicas）是巴西的个人识别码，使用 11 位数字表示。为了在应用中使用 CPF 组件，我们可以在我们的组件中引入它，并在 HTML 模板中使用它。例如，在你的组件文件中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -
------- -------
-------------- ----------------------------------
-
--
------ ----- ------------ -
---- -------
-然后这里是 ngx-cpf-input 的使用效果：
使用 CNPJ 组件
CNPJ（Cadastro Nacional de Pessoa Jurídica）是巴西的公司识别码，使用 14 位数字表示。为了在应用中使用 CNPJ 组件，我们可以在我们的组件中引入它，并在 HTML 模板中使用它。例如，在你的组件文件中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -
-------- -------
--------------- ------------------------------------
-
--
------ ----- ------------ -
----- -------
-然后这里是 ngx-cnpj-input 的使用效果：
指导意义
使用 ngx-brazilian-inputs 可以帮助我们在开发涉及到巴西表单输入的网站或应用时，更加方便高效地完成表单输入。此外，ngx-brazilian-inputs 的代码是基于 Angular 编写的，并且是开源的，这意味着我们可以自由地修改和定制它以满足我们的特定需求。在学习和使用 ngx-brazilian-inputs 的过程中，我们也可以学习到如何编写 Angular 组件，并加深对 Angular 的理解。
总结
在这篇文章中，我们介绍了 ngx-brazilian-inputs 这个 npm 包，并提供了一些如何使用它的示例代码。希望这些内容能够帮助你更好地完成巴西表单输入相关的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc52b