简介
在前端领域，使用 Angular 构建动态表单是一项重要的技能。@ng-dynamic-forms/ui-material 是一个用于构建动态表单的 npm 包，基于 Angular Material 组件库，为 Angular 表单提供了更多样化的选项，并支持自动化表单控制和验证。
本篇教程将介绍如何使用 @ng-dynamic-forms/ui-material，在一个 Angular 应用中构建一个简单的动态表单。
安装
在使用 @ng-dynamic-forms/ui-material 之前，需要先在项目中安装 Angular 和 Angular Material：
npm install @angular/core @angular/forms @angular/material
接下来，安装 @ng-dynamic-forms/ui-material 和它的依赖项：
npm install @ng-dynamic-forms/core @ng-dynamic-forms/ui-material
创建一个动态表单
首先，在你的 Angular 项目中创建一个新组件，并在模板中添加一个表单。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- ----------------- ------------ --------- ------------------- --------- - ----- ------------------------ ------------- ----------- ----- -- -------- ---- ----- --- ------- ---- ------ --- --------------- ------- ----------------------------- ------- -- -- ------ ----- -------------------- - ---------- ---------- ------ - --- -展开代码
在模板中，我们使用了 Angular 的 FormGroup 来处理表单控件的值和校验。下一步，我们需要在 fields 数组中定义表单控件。但是我们还没有告诉 @ng-dynamic-forms/ui-material 这些字段的类型，所以 @ng-dynamic-forms/ui-material 也不知道要创建哪种表单控件。这时我们需要在组件中注入一个 DynamicFormService。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- ----------------- ------ - ------------------ - ---- ------------------------- ------------ --------- ------------------- --------- - ----- ------------------------ ------------- ----------- ----- -- -------- ---------------------- ---------------------------- ---------------------------------------- --------------- ------- ----------------------------- ------- -- -- ------ ----- -------------------- - ---------- ---------- ------ - --- ------------------- ------------------- ------------------- -- -展开代码
在模板中，我们使用了 ng-dynamic-forms-text 组件代替了之前的 TODO 占位符，并将每个字段的 id 作为 formControlName。这是因为表单控件的值必须与 formControlName 相关联，@ng-dynamic-forms/ui-material 会通过这个 id 自动匹配相应的表单控件。在这个例子中，我们使用了一个 Text 输入框来编辑所有表单控件。
下一步，我们需要将每个字段的类型定义在我们的 fields 数组中，并在组件的 ngOnInit 生命周期钩子中通过 DynamicFormsService 创建表单控件：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - --------- - ---- ----------------- ------ - ------------------ - ---- ------------------------- ------ - ------------------------ ---------------------------- - ---- ------------------------- ------ - ------------- - ---- ----------------------------- ------------ --------- ------------------- --------- - ----- ------------------------ ------------- ----------- ----- -- -------- ----------------- --------------- ------------------------------------------- --------------- ------- ----------------------------- ------- -- -- ------ ----- -------------------- ---------- ------ - ---------- ---------- ------- ------------------------- - --- ------------------- ------------------- ------------------- -- ---------- - ----- ---- - --- --------------- --- ------- ------ ----- ------ ---------- ---- ----- -- ------------ ------ ---- --------- --- ----------------------- -------------- - ----------------------------------------------------- - -展开代码
在上面的代码中，我们通过 TextAreaModel 定义了一个文本区域表单控件。接下来，我们将这个控件添加到 fields 数组中，并使用 createFormGroup 方法实例化 formGroup。
如果你现在在浏览器中运行你的应用程序，你会看到一个带有一个文本区域的表单。这就是我们创建的动态表单。
表单组
在使用动态表单时，有时我们需要将一组控件作为一个整体来表达数据。这时我们可以使用 GroupModel。
以以下代码为例：
-- -------------------- ---- ------- ---------- - ----- ----- - --- ------------ --- ---------- ------ - --- -------------- --- --------- ------ --------- ------------ ------ ---- ------ --------- ----------- - --------- ----- -- --- --- -------------- --- ------- ------ ------- ------------ ------ ---- ------ ----------- - --------- ----- -- --- --- ------------- --- -------- ------ -------- -------- - - ------ ----- ------ --------- -- - ------ ----- ------ -------- -- - ------ ----- ------ --------- -- - ------ ----- ------ ---------- -- -- ------------ ------- - ------- ----------- - --------- ----- -- --- --- -------------- --- ------ ------ ------ ------------ ------ ---- --- ------ ----------- - --------- ----- -------- ----------- -- --- -- --- ------------------------ -------------- - ----------------------------------------------------- -展开代码
在上面的代码中，我们使用 GroupModel 创建了一个组表单控件，其中包含了一个街道、城市、州和邮编。
在模版中，我们使用以下方式展现表组控件。
-- -------------------- ---- ------- ------------- ----------- ----- -- -------- ------------- ----------------- --- --------- ------ ----------- ------- ---- ------------------------------------------- ------------- ----------- ---------- -- ------------- ---------------- ------------------------------------------ --------------------------------------- --------------- ------ --------------- ------------- ----------------- --- --------- ---------------- ----------------------- ---------------------------------- --------------- ---------------展开代码
在模板中，我们使用了 *ngIf 来确定如果字段类型为 group 则显示这个组。然后，我们使用了 FormGroup 来将组中的每个输入框链接在一起。
总结
@ng-dynamic-forms/ui-material 是一个强大的 Angular 动态表单控件库，可以帮助你更轻松和更高效地构建自定义表单。在本教程中，我们演示了如何使用 @ng-dynamic-forms/ui-material 创建一个简单的动态表单，并创建了一个表组的例子。希望这些知识对你有帮助，祝你愉快的编码！
示例代码
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - --------- - ---- ----------------- ------ - ------------------ - ---- ------------------------- ------ - ------------------------ ----------- ------------ -------------- ------------ - ---- ------------------------- ------------ --------- ------------------- --------- - ----- ------------------------ ------------- ----------- ----- -- -------- ------------- ----------------- --- --------- ------ ----------- ------- ---- ------------------------------------------- ------------- ----------- ---------- -- ------------- ---------------- ------------------------------------------ --------------------------------------- --------------- ------ --------------- ------------- ----------------- --- --------- ---------------- ----------------------- ---------------------------------- --------------- --------------- ------- ----------------------------- ------- -- -- ------ ----- -------------------- ---------- ------ - ---------- ---------- ------- ------------------------- - --- ------------------- ------------------- ------------------- -- ---------- - ----- ---- - --- --------------- --- ------- ------ ----- ------ ---------- ---- ----- -- ------------ ------ ---- --------- --- ----- ----- - --- ------------ --- ---------- ------ - --- -------------- --- --------- ------ --------- ------------ ------ ---- ------ --------- ----------- - --------- ----- -- --- --- -------------- --- ------- ------ ------- ------------ ------ ---- ------ ----------- - --------- ----- -- --- --- ------------- --- -------- ------ -------- -------- - - ------ ----- ------ --------- -- - ------ ----- ------ -------- -- - ------ ----- ------ --------- -- - ------ ----- ------ ---------- -- -- ------------ ------- - ------- ----------- - --------- ----- -- --- --- -------------- --- ------ ------ ------ ------------ ------ ---- --- ------ ----------- - --------- ----- -------- ----------- -- --- -- --- ----------------------- ------------------------ -------------- - ----------------------------------------------------- - -展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194515
