Question

在我的有角度的应用程序中，我必须实现非常复杂的形式。用户可以动态添加/删除/修改表单的元素（组）。

每个元素都是一组输入，其中某些输入有条件地被隐藏/可见（基于该组中下拉菜单的选择）。这些条件组可能包含不同数量的字段，其中某些字段可能是必需的，而某些字段不是必需的。

在验证所有可见字段之前，无法添加新的数组元素。整个表单应该易于序列化（因为其存储在后端）和反序列化。

我很确定我必须使用表单数组。我一直在检查一些ng dynamic forms之类的第三方库，但仍然不确定如何实现所需的库。有什么想法可以实现吗？

表单用于添加/编辑/删除以下对象：

tasks": [
        {
            "uuid": "4e7e6737-8557-4a05-bb78-808f8a10daa4",
            "created": "2018-12-17T15:19:07.328408+01:00",
            "title": "TITLE (first input)", // value of first input
            "modified": "2018-12-17T15:19:07.328440+01:00",
            "task_type": "SEND_EMAIL",// this is value of TYPE DROPDOWN

            "time_value": 2, // value of 2nd input in array element
            "time_unit": "DAYS", // value of 3rd input in array element
            "time_dir": "BEFORE",// value of 4th input in array element
            "process": "5f185517-40df-43e8-b677-3cf929b21638",
            "config": {
                // here all fields are selected form group inputs
                "uuid": "b21f4cdf-22ba-42cd-81fa-7e7f1f84e6d1",
                "created": "2018-12-17T15:20:25.350927+01:00",
                "modified": "2018-12-17T15:20:25.350948+01:00",
                "email_title": "Email title",
                "email_from_address": "example@example.com",
                "email_from_name": "Hello",
                "email_content": "Email body",
            }
        }
    ],

TYPE DROPDOWN选项用于示例： “发送电子邮件”-如果选择了可见的组，则会显示“电子邮件标题”，“电子邮件发件人”，“电子邮件内容”等字段 “创建事件”-如果选择的可见组将显示“事件日期和时间”，“事件持续时间”等字段，则

反序列化表单时，每个任务的“ config”对象将包含选定类型的特定字段。

Answer 1

更简单的方法是拥有一个formGroup数组，formGroup必须具有所有字段（与“ dropdown”的值无关）。

人们可能会认为，当我们制作一种类型的表格

时，

UITextView

“表单”必须是FormGroup，但它本身也可以是FormArray

因此，完整示例可以参见stackblitz

UITableView

总而言之，我们拥有一个FormArray，它具有一个可以接收数据或null并返回FormGroup的函数。一直以来，我们都有一个Form，它具有一个可以接收数据并返回表单的函数

<form [formGroup]="form">

具有条件显示/隐藏的动态角形组数组

1 个答案: