介绍
ng-form-builder 是一个 Angular 的表单构建器 npm 包。它能够通过简单的配置快速高效地构建出表单，减少了编写繁琐 HTML 的工作量。具有简单易用、自适应情况多样、支持多种验证方式等诸多优点。
安装
首先，需要安装 Angular CLI 和 TypeScript：
npm install -g @angular/cli npm install -g typescript
随后，安装 ng-form-builder：
npm install ng-form-builder --save
快速使用
在 app.module.ts 中导入 NgFormBuilderModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------- - ---- ------------------
------ - ------------ - ---- ------------------
-----------
------------- -
-------------
--
-------- -
--------------
------------------- -- -----
--
---------- ---
---------- --------------
--
------ ----- --------- - -在 HTML 中使用：
<form ngFormBuilder [controls]="formControls"></form>
在 typescript 中定义表单控件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- -----------
--------- -
----- ------------- ---------------------------------
-
--
------ ----- ------------ -
------------- -------------- - -
-
----- -------
----- -----------
------ ------
------------ ----------
--
-
----- -----------
----- -----------
------ -----
------------ ---------
--
-
----- -----------
----- ----------
------ -----
------------ ---------
--
-
----- ---------
----- ------
------ -----
-------- -
- ------ ------- ------ --- --
- ------ --------- ------ --- -
-
-
--
-API
IFormControl 类型
IFormControl 类型用于定义表单控件。
interface IFormControl {
type: 'text' | 'password' | 'checkbox' | 'radio' | 'select' | 'textarea',
name: string, // 控件名，用于提交表单时获取数据
label?: string, // 控件标题
placeholder?: string, // 控件placeholder
options?: { value: any, label: string }[] // option，只有 select 控件支持
}控件类型
- text：文本框
- password：密码框
- checkbox：单选框组
- radio：多选框组
- select：下拉框
- textarea：多行文本框
关于自定义控件
如果本 npm 包中的控件无法满足您的需求，您可以自定义控件类型。只需要在 app.module.ts 中导入 NgFormBuilderCustomizeModule，并在定义表单控件时将控件类型写为要使用的组件的 tag 即可。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------- ---------------------------- - ---- ------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- ----------------------- -- -------
-----------
------------- -
-------------
---------------- -- -------
--
-------- -
--------------
--------------------
---------------------------- -- -----
--
---------- ---
---------- --------------
--
------ ----- --------- - -在 typescript 中定义控件时将 type 写为您的自定义组件的 tag：
formControls: IFormControl[] = [
{
type: 'my-input', // 自定义组件的 tag
name: 'username',
label: '用户名',
placeholder: '请输入您的用户名'
}
];总结
ng-form-builder 对于想要快速搭建 Angular 表单的开发人员来说是一个非常实用的 npm 包。它大大简化了表单构建的过程，使开发人员能够更加专注于业务逻辑的实现。但需要注意的是，由于 ng-form-builder 使用的是 Angular 内置的动态表单构建方式，不同于其它第三方库，需要开发人员掌握更多 Angular 基础知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668d81e8991b448e2cb7