javascript - 如何使用多嵌套 json 值修补响应式(Reactive)表单

标签 javascript angular angular-reactive-forms

我正在使用包含 formArray、formGroups 和 formControls 的多嵌套(无限级) react 形式的值。它存储在数据库中。
目前,我正在使用递归函数修补表单,该函数循环遍历整个 JSON,并根据键和值生成 formArrays、formGroups 和 formControls。
现在的问题是,从性能 Angular 来看,我使用的这种方法并不好,那么有没有更好的方法来一次性修补这种多嵌套形式? (只需创建表单,无需在 HTML 中显示)
这是用于问题引用的简化 JSON -
任何部分都可以有 subSections,然后 subSections 可以有某种部分

const formDataSections = [
  {
    index: 1,
    sectionName: "",
    subSections: [
      {
        index: 1,
        subSectionName: "",
        sections: [
          {
            index: null,
            sectionName: "",
            subSections: [
              {
                index: null,
                subSectionName: "",
                sections: [
                  {
                    index: null,
                    sectionName: "",
                  },
                  {
                    index: null,
                    sectionName: "",
                    subSections: [
                      {
                        index: null,
                        subSectionName: "",
                        sections: [
                          {
                            index: null,
                            sectionName: "",
                          },
                          {
                            index: null,
                            sectionName: "",
                            subSections: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
          {
            index: null,
            sectionName: "",
            subSections: [
              {
                index: null,
                contentTypes: [],
                sections: [
                  {
                    index: null,
                    sectionName: "",
                    subSections: [],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

最佳答案

您可以使用 ControlValueAccessor 创建自定义“子表单”组件( docs ) 并递归调用组件 ( example )
我认为您无法避免递归,因为列表可能具有无限长度
这是一个(不完全工作...)StackBlitz example ,只是为了展示我在说什么。

关于javascript - 如何使用多嵌套 json 值修补响应式(Reactive)表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69979243/

相关文章:

javascript - ui-grid如何自定义动态标题和数据数量?

angular - 从 Angular 的详细信息页面导航回来后保持搜索页面的状态

javascript - 使用服务提供者(typescript/Angular 2)在 ionic 2 View 中恢复并显示 json 数据(对象、数组)

angular - 从 json 创建动态表单时出错找不到名称为 : 'data' 的控件

键入时进行 Angular 响应式(Reactive)表单验证

javascript - 如何删除 Fabric.js 中对象周围的蓝色边框

具有范围输入值的 Javascript 条件语句

javascript - React Hooks TypeScript 事件和状态类型

java - 如何在 Spring Boot 2 和 Angular 中设置未找到页面

angular - 如何有条件地生成 Angular 6 动态 react 形式