前端开发人员经常需要在 Angular 应用程序中处理表单。在某些情况下，表单是静态的，不需要动态生成。然而，在其他情况下，表单可能需要根据后端数据的动态生成。在这种情况下，可以使用 @ng-dynamic-forms/core npm 包来动态生成表单。本文将为您提供使用 @ng-dynamic-forms/core 的详细指南和示例代码。
安装 @ng-dynamic-forms/core
要使用 @ng-dynamic-forms/core，请从 npm registry 安装它。请使用以下命令：
npm install @ng-dynamic-forms/core --save
导入动态表单模块
在使用 @ng-dynamic-forms/core 之前，您需要在 Angular 应用程序中导入动态表单模块。如果您使用 Angular CLI 创建应用程序，则可以将以下代码添加到 app.module.ts 文件中：
import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
@NgModule({
imports: [DynamicFormsCoreModule]
})
export class AppModule {}这将导入动态表单模块，并使其可用于应用程序中。现在，我们可以使用这个模块创建动态表单。
创建一个动态表单
让我们看一个动态表单的示例，其中包含一个表单控件和 submit 按钮。要创建表单，我们需要定义组件类和 HTML 模板。
动态表单组件类
定义动态表单组件类。在此示例中，动态表单中包含一个名称输入框和提交按钮。在组件中，我们定义了 fields 数组，该数组包含输入框和提交按钮的选项。然后，我们将该数组传递给 QcForm ，这是内置的类，它允许我们生成动态表单。最后，我们编写 submit 函数，该函数在提交表单时调用。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------ - ----------------- ----------------- - ---- -------------------------
------------
--------- -------------------
--------- -
---------------- ------------------- --------------------------------------
------- ------------------ ---------------------------------------------
--
--
------ ----- -------------------- -
---------- ---------------- - -
--- -------------------
--- --------
------ -------
----------- -
--------- -----
--
---
--
---------- ----------
------------- -
-------------- - --- --------------
-
-------- -
----- ----- - ---------------------
-------------------
-
-动态表单模板
然后，在模板中使用 ng-dynamic-form 指令显示动态表单组件。该指令包含两个属性：
model：表单模型，我们在上面定义了该模型。group：FormGroup 对象，我们在组件中定义了该对象。
<div> <app-dynamic-form></app-dynamic-form> </div>
更多功能
@ng-dynamic-forms/core 还提供其他功能来扩展处理表单的能力。一些其他功能包括使用自定义模板，处理复杂表单布局和使用表单控件选项。
使用自定义模板
如果您需要完全控制动态表单的样式和布局，可以使用自定义模板。要使用自定义模板，请使用以下命令导入模板模块：
-- -------------------- ---- -------
------ - ---------------------- - ---- -------------------------
------ - ------------------------- --------------------------- - ---- ------------------------------
-----------
-------- -
---------------------------------
----------------------------
--
--
------ ----- --------- --这将导入 Angular Bootstrap 模块，提供自定义表单控件和控件选项。
要使用自定义模板，请创建 HTML 代码块，并使用表单指令指定该块。在本示例中，我们将创建包含 checkbox 控件的表单。
-- -------------------- ---- -------
------------- --------------
----- ------------------------
---- ----------- ------------ -- -------
---- -------------------------------
---- ----------------------------------------
--------- ------------------ ----------
------ ----------------------------------- --------------- --
------
------------ ----------------
------------------------ ----------------------- -------------------------------------------------
--------------
------
------
-------
---------------复杂表单布局
@ng-dynamic-forms/core 可以轻松处理复杂表单布局。在这个示例中，我们将创建一个包含多个 tab 的表单。我们可以使用 DynamicFormModel 类的 tabs 属性来访问这些 tab。
-- -------------------- ---- -------
---------- ---------------- - -
-
----- -------
--- -------
----- -
-
------ ---- ---
--- -------
------ --- -----------
----- --- --------------- ---------------------------------------- ---------------------------
------ --- --------------- ---------------------------------------- --------------------
---
--
-
------ ---- ---
--- -------
------ --- -----------
------ --- --------------- ---------------------------------------- ----------------------------
---- --- --------------- ---------------------------------------- ----------------------
---
--
--
--
--在 HTML 中，我们可以使用 ng-dynamic-form 指令访问表单及其控件。我们还可以使用属性绑定来设置动态属性，例如表单控件的值或占位符。
<form [formGroup]="formGroup">
<ng-dynamic-form #form [model]="formModel" [group]="formGroup" [ngStyle]="{ 'max-width.px': tabWidth }"></ng-dynamic-form>
</form>表单控件选项
在深入了解 @ng-dynamic-forms/core 之前，让我们看一下一些常用表单控件选项。以下是一些常用选项的示例：
下拉框
-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------
-------- ----- - -
- ------ ----- ------ --------- --
- ------ ----- ------ -------- --
- ------ ----- ------ -------- --
--
------------ ----------------------- - --- --------------------
--- ---------------
------ -------- ------ --------
-------- ------------
---<select [formControlName]="selectModel.id">
<option value="">Please select</option>
<option *ngFor="let option of selectModel.options" [value]="option.value">{{ option.label }}</option>
</select>单选按钮
-- -------------------- ---- -------
------ - ---------------------- - ---- -------------------------
---------------- ---------------------- - --- ------------------------
--- -------------------
-------- -
- ------ --------- ------ -------- --
- ------ ------- --- ------ ------- -- --
- ------ ------- --- ------ ------- -- --
--
---<div [formGroup]="radioGroupModel.group">
<label>{{ radioGroupModel.label }}</label>
<div *ngFor="let option of radioGroupModel.options">
<input [formControlName]="radioGroupModel.id" type="radio" [value]="option.value" />
<label>{{ option.label }}</label>
</div>
</div>复选框
import { DynamicCheckBoxModel } from '@ng-dynamic-forms/core';
checkboxModel: DynamicCheckBoxModel = new DynamicCheckBoxModel({
id: 'checkboxSimple',
label: 'Label Simple',
value: true,
});<label>{{ checkboxModel.label }}</label>
<input [formControlName]="checkboxModel.id" type="checkbox" />结论
在顶部中，我们看到了如何使用 @ng-dynamic-forms/core npm 包生成动态表单。我们用 Angular 模块，动态表单组件类和 HTML 模板的方式来学习了如何使用库的主要功能。此外，我们还学习了如何使用自定义模板，处理复杂的表单布局和使用表单控件选项。
如果您想深入了解如何使用此库，则应查看其在线文档。该文档提供有关更多选项和用法的详细信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194514