如何在Angular响应式表单FormArray中预设值？解决编辑赋值报错

你的代码存在两个核心问题，直接导致了FormArray预填失败和控件路径错误：

1. createRunnerNode方法编辑模式逻辑失效：你用forEach循环处理节点数据，但循环内的return不会让函数返回对应的FormGroup，最终edit模式下该方法无返回值，导致FormArray中添加的是undefined控件，自然找不到runnerNodes -> 0 -> script_name这类路径。
2. 编辑模式FormArray初始化错误：你仅往FormArray中添加了一个通过createRunnerNode生成的控件，没有根据scriptRunnerData.runnerNodes的实际长度生成对应数量的FormGroup。

修复方案一：重构表单初始化逻辑，直接生成匹配数据结构的FormArray #

先修改createRunnerNode方法，让它支持接收节点数据参数，复用单个FormGroup的生成逻辑：

createRunnerNode(node?: {script_name: string, script_file_content: string}): FormGroup {
  // 编辑模式传入node则用对应值，创建模式用空值
  const scriptName = node ? [{value: node.script_name, disabled: false}] : '';
  const scriptContent = node 
    ? [{value: node.script_file_content, disabled: false}, Validators.required] 
    : ['', Validators.required];

  return this.formBuilder.group({
    script_name: scriptName,
    script_file_content: scriptContent
  });
}

再修改createWorkflowAddFormBuilderObj方法，在编辑模式下遍历数据生成对应数量的FormGroup：

createWorkflowAddFormBuilderObj(){
  if(this.data.mode === 'create'){
    this.workflowAddForm = this.formBuilder.group({
      workflow_name: '',
      runnerNodes: this.formBuilder.array([ this.createRunnerNode() ]),
      executer_command: '',
      config_name: '',
      config_file_content: ''
    });
  }else if(this.data.mode === 'edit'){
    // 遍历runnerNodes生成对应的FormGroup数组
    const runnerNodeControls = this.scriptRunnerData.runnerNodes.map(node => this.createRunnerNode(node));
    
    this.workflowAddForm = this.formBuilder.group({
      workflow_name: [{value: this.scriptRunnerData.workflow_name, disabled: false}],
      runnerNodes: this.formBuilder.array(runnerNodeControls), // 用生成的控件数组初始化FormArray
      executer_command: [{value: this.scriptRunnerData.executer_command, disabled: false}],
      config_name: [{value: this.scriptRunnerData.config_name, disabled: false}],
      config_file_content: [{value: this.scriptRunnerData.config_file_content, disabled: false}]
    });
  }
}

修复方案二：使用patchValue批量填充表单数据（适合统一表单结构后赋值） #

如果希望统一create和edit模式的表单初始化逻辑，可以先创建基础表单结构，再用patchValue批量填充数据：

createWorkflowAddFormBuilderObj(){
  // 统一创建表单结构
  this.workflowAddForm = this.formBuilder.group({
    workflow_name: '',
    runnerNodes: this.formBuilder.array([ this.createRunnerNode() ]),
    executer_command: '',
    config_name: '',
    config_file_content: ''
  });

  // 编辑模式下填充数据
  if(this.data.mode === 'edit'){
    const runnerNodesArray = this.workflowAddForm.get('runnerNodes') as FormArray;
    // 清空原有空控件
    runnerNodesArray.clear();
    // 添加对应数量的空FormGroup
    this.scriptRunnerData.runnerNodes.forEach(() => {
      runnerNodesArray.push(this.createRunnerNode());
    });
    // 批量填充所有数据（包括FormArray）
    this.workflowAddForm.patchValue(this.scriptRunnerData);
  }
}

这种方式代码更简洁，无需区分两种模式的表单初始化逻辑。

补充：优化addMoreRunner方法 #

可以封装一个getter来简化FormArray的获取：

get runnerNodes(): FormArray {
  return this.workflowAddForm.get('runnerNodes') as FormArray;
}

addMoreRunner(){
  this.runnerNodes.push(this.createRunnerNode());
  this.runnerNodeLength = this.runnerNodes.controls.length;
}

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