Angular嵌套表单按指定数据填充时多条skill字段无法填充问题求解

核心问题原因 #

skill字段填充失效属于Angular嵌套FormArray的结构匹配问题：patchValue只会按索引对已有表单控件赋值，不会自动创建缺失的控件，现有代码的表单初始化逻辑导致嵌套的skillDTOS FormArray长度和数据源不匹配，多余的skill条目自然无法填充。
具体错误点包括：

• 原循环逻辑冗余且错误：循环调用setResourceDTOS()会重复往FormArray中插入冗余控件，且循环终止条件currentLength < newdata.resourceDTOS.length - 1会少初始化一个resource条目
• setResourceDTOS没有先清空原有FormArray控件，残留的旧控件会导致索引错位，赋值对应不上
• 没有保证嵌套的skillDTOS FormArray长度和数据源完全匹配就调用patchValue

修复代码 #

第一步：修改表单初始化方法 #

让方法接收数据源作为入参，每次初始化前先清空原有控件，避免冗余和错位：

setResourceDTOS(resourceList: any[]) {
    // 先清空旧的FormArray控件，避免残留
    let control = <FormArray>this.myForm.controls.resourceDTOS;
    control.clear();

    resourceList.forEach((x) => {
      control.push(
        this.fb.group({
          seniority: x.seniority,
          skillDTOS: this.setResourceSkills(x),
          resourceNotes: x.resourceNotes,
        })
      );
    });
}

setResourceSkills(x: any) {
    let arr = new FormArray([]);
    x.skillDTOS.forEach((y) => {
      arr.push(
        this.fb.group({
          skill: y.skill,
        })
      );
    });
    return arr;
}

第二步：替换原有冗余循环逻辑 #

直接调用修改后的初始化方法传入新数据，不需要额外的循环：

// 删掉原有冗余for循环，直接传入newdata的resourceDTOS初始化表单
this.setResourceDTOS(newdata.resourceDTOS);

// 如果还有其他顶层表单字段需要赋值，保留patchValue即可
this.myForm.patchValue(newdata);

补充说明 #

初始化方法本身已经在创建控件时同步赋值，如果你没有其他顶层字段需要填充，甚至可以省略patchValue调用。如果后续需要动态增减skill条目，每次修改后也要先同步FormArray长度和数据源一致，再做赋值操作。

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