在基于 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