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