前言
在前端开发中，表单是不可或缺的一部分。在 Angular 2+ 开发中，@ng2-dynamic-forms 是一个非常优秀的动态表单库，它可以让我们轻松地生成各种类型的表单控件，然而配合 ng-bootstrap 组件库使用时会比较麻烦，本篇文章将着眼于教授如何使用 @ng2-dynamic-forms/ui-ng-bootstrap 这个 npm 包来解决这个问题。
什么是 @ng2-dynamic-forms/ui-ng-bootstrap？
@ng2-dynamic-forms/ui-ng-bootstrap 是一个基于 Angular 2+ 的动态表单扩展库，它支持我们将生成的表单控件通过 ng-bootstrap 组件库进行渲染。通过使用该库，我们可以轻松地将生成的表单控件集成到我们的 ng-bootstrap 的项目中。
安装 @ng2-dynamic-forms/ui-ng-bootstrap
在开始前，我们首先需要在项目中安装 @ng2-dynamic-forms/ui-ng-bootstrap，可以通过 npm 命令来完成安装，具体步骤如下：
npm install @ng2-dynamic-forms/core --save npm install @ng-bootstrap/ng-bootstrap --save npm install @ng2-dynamic-forms/ui-ng-bootstrap --save
生成表单控件
在完成 @ng2-dynamic-forms/ui-ng-bootstrap 的安装后，我们可以开始使用该库来生成表单控件了。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ - ---------- ------------ ---------- - ---- -----------------
------ - ----------------------- - ---- --------------------------
------ - ------------------ - ---- -------------------------------------
-- ------
----- -------- - --- --------------------
--- -----------
------ -- ------ --- ----- -- --- -----------
------ ----
---
-- --------
----- ---------- ------------------------- - -
--------
--
-- -------
----- --------- - --- -----------
--------- --- --------------------------- ------------------------
---
-- ---------------
-------------- - ----------
-------------- - ----------这个例子中我们创建了一个 CheckboxInputModel，并将其加入了一个表单控件模型中，最后将该表单控件模型绑定到了一个 FormGroup 上。
渲染表单控件
在已经生成了表单控件和渲染模型后，我们可以开始使用 ng-bootstrap 组件库来对表单进行渲染了。下面是一个示例代码：
-- -------------------- ---- -------
----- ------------------------
---------------------------------- ----------- ------- -- ----------
-------------------
------------------
------------------------------------
------- ---------- ------------ -----------------------------
-------在这个例子中，我们使用了 ng-bootstrap 组件库中的动态表单组件 dynamic-ng-bootstrap-form-control 来对表单控件模型进行渲染。每个表单控件将会被循环渲染并放置在表单中，我们同样加入了一个提交按钮。
结语
通过使用 @ng2-dynamic-forms/ui-ng-bootstrap，我们可以轻松地将生成的表单控件渲染到 ng-bootstrap 的项目中。该 npm 包不仅可以提高我们的开发效率，而且还能让我们的表单控件更加美观和易用。如果你正在构建一个 ng-bootstrap 项目，并需要动态生成表单控件，请务必尝试一下这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560a681e8991b448dee4f