Angular动态表单问题：多选后仅获取单个Form Array数据

我需要从动态表单中获取表单数据。操作时在多选框中选择2个岗位和3个班次，点击保存按钮后表单成功生成，但当前代码仅能获取一组数组数据，无法得到预期的嵌套数组结构。

预期输出 #

{
    "patterns": [
        [
            {
                "sun": "1",
                "mon": "1",
                "tue": "1",
                "wed": "1",
                "thu": "1",
                "fri": "1",
                "sat": "1"
            },
            {
                "sun": "2",
                "mon": "2",
                "tue": "2",
                "wed": "2",
                "thu": "2",
                "fri": "2",
                "sat": "2"
            },
            {
                "sun": "3",
                "mon": "3",
                "tue": "3",
                "wed": "3",
                "thu": "3",
                "fri": "3",
                "sat": "3"
            }
        ],
        [
            {
                "sun": "4",
                "mon": "4",
                "tue": "4",
                "wed": "4",
                "thu": "4",
                "fri": "4",
                "sat": "4"
            },
            {
                "sun": "5",
                "mon": "5",
                "tue": "5",
                "wed": "5",
                "thu": "5",
                "fri": "5",
                "sat": "5"
            },
            {
                "sun": "6",
                "mon": "6",
                "tue": "6",
                "wed": "6",
                "thu": "6",
                "fri": "6",
                "sat": "6"
            }
        ]
    ]
}

要实现预期的嵌套数组结构，需按岗位数×班次数的维度重构表单构建逻辑：

1. 修改表单初始化方法
   遍历每个选中的岗位，为每个岗位创建对应班次数量的表单组数组。替换原createForm方法：

   createForm() {
     const patternsArray = this.formBuilder.array([]);
     // 遍历选中的每个岗位
     this.selectedDesignations.forEach(() => {
       const shiftGroupArray = this.formBuilder.array([]);
       // 为每个班次生成包含7天的表单组
       this.selectedShifts.forEach((shift, shiftIndex) => {
         const dayControls = {};
         ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'].forEach(day => {
           dayControls[day] = this.formBuilder.control((shiftIndex + 1 + (patternsArray.length * this.selectedShifts.length)).toString());
         });
         shiftGroupArray.push(this.formBuilder.group(dayControls));
       });
       patternsArray.push(shiftGroupArray);
     });
     this.myForm = this.formBuilder.group({
       patterns: patternsArray
     });
   }
   

   注：班次值计算时，通过patternsArray.length * this.selectedShifts.length实现不同岗位的班次值连续递增（如第一个岗位用1-3，第二个用4-6）。

2. 简化提交逻辑
   保存时直接获取表单value即可得到嵌套结构：

   onSubmit() {
     console.log(this.myForm.value);
   }
   

效果验证 #

修改后，选择2个岗位+3个班次提交，输出数据会和预期结构完全一致：外层数组对应岗位，内层数组对应每个岗位下的班次，每个班次对象包含7天的设置值。

内容的提问来源于stack exchange，提问作者Akilan