如何在 FormArray 中預設反應形式的值？

Question

我有一個帶有一些動態場的反應形式。 我正在嘗試構建一個 CRUD 操作。 “創建”工作正常但要更新表單我需要預填充字段。 我可以預填充不在“FormArray”中的字段，但因為我正在使用一些動態字段，所以我也想在動態字段中顯示數據。

這是我必須預先填充的示例有效負載：`

scriptRunnerData: any = {
    "workflow_name": "vvvv",
    "runnerNodes": [
        {
            "script_name": "sample.py",
            "script_file_content": "jhsvdfhskjdhfvksdj fksjd"
        },
        {
            "script_name": "sample1.py",
            "script_file_content": "sdfjhdsbf sjd fsjd sd dfsb dlfsdjf sd  fls"
        }
    ],
    "executer_command": "dfhdhdjhkdfkdhfg.py",
    "config_name": "config.json",
    "config_file_content": "{\"name\":\"vvvv\"}"
  }

I am passing modes 'create' and 'edit'. Create is working fine but for View I am getting error: I am passing modes 'create' and 'edit'. Create is working fine but for View I am getting error:錯誤錯誤：找不到路徑控制：'runnerNodes - > 0 - > script_name' and錯誤錯誤：找不到路徑控制：'runnerNodes - > 0 - > script_file_content'`

這是我的代碼：`

createWorkflowAddFormBuilderObj(){
    if(this.data.mode === 'create'){
      console.log("data", this.data);
      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'){
      this.workflowAddForm = this.formBuilder.group({
        workflow_name: [{value: this.scriptRunnerData.workflow_name, disabled: false}],
        runnerNodes: this.formBuilder.array([ this.createRunnerNode() ]),
        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}]
      });
    }
    
  }

  createRunnerNode(): FormGroup {
    if(this.data.mode === 'create'){
      return this.formBuilder.group({
        script_name: '',
        script_file_content: ['', Validators.required]
      });
    }else if(this.data.mode === 'edit'){
      this.scriptRunnerData.runnerNodes.forEach(node =>{
        return this.formBuilder.group({
          script_name: [{value: node.script_name, disabled: false}],
          script_file_content: [{value: node.script_file_content, disabled: false}, Validators.required]
        });
      })
    }
  }

  addMoreRunner(){
    this.runnerNodes = this.workflowAddForm.get('runnerNodes') as FormArray;
    this.runnerNodes.push(this.createRunnerNode());
    this.runnerNodeLength = this.runnerNodes.controls.length;
  }

Can anyone please suggest what exactly I have to do. Is Can anyone please suggest what exactly I have to do. Is setValue OR patchValue` 將在這里工作。 如何在這種情況下使用這些方法。 提前致謝。

Answer 1

我修改createWorkflowAddFormBuilderObj()

createWorkflowAddFormBuilderObj(){
    if(this.data.mode === 'create'){
      console.log("data", this.data);
      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'){
      const controls = this.scriptRunnerData.runnerNodes.map((c) =>
        this.formBuilder.group({
          script_name: [{value: c.script_name, disabled: true}],
          script_file_content: [{value: c.script_file_content, disabled: true}]
        })
      );
      this.workflowAddForm = this.formBuilder.group({
        workflow_name: [{value: this.scriptRunnerData.workflow_name, disabled: true}],
        runnerNodes: this.formBuilder.array(controls),
        executer_command: [{value: this.scriptRunnerData.executer_command, disabled: true}],
        config_name: [{value: this.scriptRunnerData.config_name, disabled: true}],
        config_file_content: [{value: this.scriptRunnerData.config_file_content, disabled: true}]
      });
    }
  }

現在它按預期工作。