在基于 Angular2+ 的前端开发中，经常需要制作表单，而 dcg-ng2-forms 这个 npm 包就提供了一些方便的表单组件，比如 checkbox、radio、select 等等。本文将介绍 dcg-ng2-forms 的使用方法，包括安装、常用组件的使用，以及示例代码。
安装
使用 npm 进行安装：
--- ------- ------------- ------
常用组件介绍
输入框
dcg-ng2-forms 的输入框组件提供了多种类型的输入框，比如文本、数字、密码等等。下面是一个简单的使用示例：
---------- --------------------------- -------------------------------------
其中，formControl 是 Angular 的表单控制器之一，[placeholder] 用于设置占位内容。更多配置选项请参考官方文档。
复选框
下面是一个简单的复选框使用示例：
------------- --------------------------- -----------------------------------
其中，value 用于设置复选框的值，可以用于表单提交。
单选框
下面是一个简单的单选框使用示例：
---------- --------------------------- ------------------------------ ---------- --------------------------- --------------------------------
其中，value 用于设置单选框的值，可以用于表单提交。
下拉框
下面是一个简单的下拉框使用示例：
----------- ----------------------------
------- ----------------------------
------- ----------------------------
------- ----------------------------
-------------dcg-select 组件支持 ngFor 指令，可以方便地实现动态选项。
示例代码
------ - ---------- ------ - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------ - ------------- ------- --------- - ---- -----------------
------ - ------- - ---- -------
------ - -------------- - ---- ----------------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- ---------- ------ -
----- ----------
------------ ------------
--------- ---------------- - --- -------------------
------------------- ------------ --------------- --
---------- -
--------- - ------------------------
--------- ---- -----------------------
--------- ---- -----------------------
------- ---------
---------- ------- ---------------------------
------ ---- -- -------------
---
---------------- - --- --------------- -----------------------
-----------------------------
------
------------------
------------ -- ------------ -- ---
------------------------
-
---------------- -- -
---------------------- -------
---
-
------------- -
-------------------------
----------------------------
-
---------- -
-------------------- -----------------
-
------ ------------------ ----------------------
-----------
-----
---------- ------------------------------ ----------------------------------
---- ------------------------------------- -- ----------------------------- -- ---------------------------------
------ ---------------------------------------------------------------
------
------
-----
---------- ------------------------------ -------------------- --------------------------------
---- ------------------------------------- -- ----------------------------- -- ---------------------------------
------ --------------------------------------------------------------
------
------
-----
---------------- -----------------------------
---------- ------------------------------
---------- --------------------------------
------------------
------
-----
------------- ------------------------------- ------------------------------------
---- -------------------------------------- -- ------------------------------ -- ----------------------------------
------ ------------------------------------------------------------------
------
------
-----
------------------- ----------------------------
------------- -------------------------------------
------------- -----------------------------------
------------- -----------------------------------
---------------------
------
-----
----------- --------------------------
------- -----------------------
------- ---------------------------
------- -----------------------------
------- --------------------------
-------------
------
-----
---------------- -------------------------------------------------
------
------- ------------- -------------------------------------
-------以上就是 dcg-ng2-forms 的使用教程，欢迎在实际项目中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562cd81e8991b448e0186