前言
ng4-form-fields 是一个方便 Angular 4+ 开发者快速集成表单元素的 npm 包。在开发中，我们总会需要使用到表单元素，如输入框、下拉框、复选框等。而 ng4-form-fields 帮助我们快速集成这些元素，减少了我们的重复劳动，提升了开发效率。本文将详细介绍使用 ng4-form-fields 的方法，包含安装、引入、使用以及示例代码等内容。
安装
使用 ng4-form-fields 前，需要在控制台执行以下命令进行安装：
npm install ng4-form-fields --save
引入与配置
在 Angular 4+ 项目中，需要在 app.module.ts 中引入 FormsModule 和 ReactiveFormsModule。
-- -------------------- ---- -------
------ - ------------ ------------------- - ---- -----------------
-----------
-------- -
------------
--------------------
--
------------- -
-------------
--
---------- --------------
--
------ ----- --------- - -引入 ng4-form-fields。
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------
-----------
-------- -
------------
--------------------
--------------------
--
---
--
------ ----- --------- - -这里我们需要注意，Ng4FormFieldsModule 需要在 FormsModule 和 ReactiveFormsModule 后进行导入，否则编译器将无法识别 ngform、formGroup 等指令（关于这点具体请参考 Angular 官方文档关于指令的说明）。
使用方法
在这里，我们将介绍两种方式使用 ng4-form-fields，一种是在 template 中使用，另一种是在 ts 中使用 FormGroup 实现。
在 template 中使用
在 template 中使用 ng4-form-fields 做法类似于 Angular 自带的表单元素，我们需要使用 ngFormControl 指令定义一个 FormControl 并绑定到相应的表单元素上。
-- -------------------- ---- -------
----- -------------------
-----
------ ----------------------
------ ----------- --------- ----------------------------------------
------
-----
------ ---------------------
------ ------------- -------- ---------------------------------------
------
-------上述代码中，我们定义了两个 FormControl，name 和 age 分别对应两个 input 元素。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ ---------- ------ -
----- ----------
------------------- --- ------------ - -
---------- -
--------- - ---------------
----- ---
---- ---
---
-
-在 ts 中，我们使用 FormBuilder 来创建表单控制器 FormGroup，并将它绑定到模板中。需要注意的是，这里与 Angular 自带的表单输入框不同，我们需要事先定义好 FormControl，并通过这些 FormControl 绑定模板中的表单元素。
在 ts 中使用 FormGroup
在 ts 中使用 FormGroup 实现表单元素与 FormControl 的绑定，可以提高代码的复用性。
-- -------------------- ---- -------
----- -------------------
-----
------ ----------------------
------ ----------- --------- -----------------------
------
-----
------ ---------------------
------ ------------- -------- ----------------------
------
-------这里，我们需要使用 formControlName 指令指定一个控件名，使表单元素和之前定义好的 FormControl 绑定。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ ---------- ------ -
----- ----------
---------- -
--------- - --- -----------
----- --- --------------
---- --- --------------
---
-
-这里我们使用 new 关键字来创建 FormControl，再使用 FormGroup 来将它们组合成一个表单控制器。
代码示例
最后，为了能够更好地掌握 ng4-form-fields 的使用方法，推荐阅读官方文档并对其中的示例代码进行模仿和练习。以下为官方给出的一个简单的示例：
-- -------------------- ---- -------
----- ------------------ ------------------------
-----
------ ----------------------
------ ----------- --------- ----------------------------------------
------
-----
------------------
-------
------ ------------ ----------------------------------------- ------------
-
--------
-------
------ ------------ ----------------------------------------- ------------
-
--------
------
-----
------------------
-------
------ --------------- ---------------------------------------- --------------------
--
--------
-------
------ --------------- ---------------------------------------- ---------------------
--
--------
-------
------ --------------- ---------------------------------------- ------------------
--
--------
------
------- -------------------------
--------- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ ---------- ------ -
----- ----------
------------------- --- ------------ - -
---------- -
--------- - ---------------
----- ---
------- ---
------ ---
---
-
---------- -
-----------------------------
-
-以上示例展示了 ng4-form-fields 支持的三种表单元素：输入框、单选框、复选框。通过 ngFormControl 指令将它们与之前定义好的 FormControl 绑定，并提交表单数据。
总结
ng4-form-fields 是一个简单而方便的 npm 包，它可以帮助我们快速完成对表单元素的集成，提高开发效率。希望本文能够为读者提供完整、详实的使用指导，并能够更好地运用 ng4-form-fields 进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726c81e8991b448e8a2a