将 FormArray 动态添加到 FormGroup

Question

我想动态添加一个 FormArray，这是我的表单：

this.form = this.formBuilder.group({
   workFlowId: ['', Validations.required]
})

在我的 UI 中，用户必须在输入中写入 workFlowId，然后我想以 workFlowId 作为 FormArray 的键向表单添加一个新的 FormArray。

表单的结果应该是这样的：

{"workFlowId": 123,"123":[{"key":"username", "value": "mor"}]}

有可能做这样的事情吗？如果是这样，它在 HTML 中的外观如何？

Answer 1

在你的表单中添加新的arrayForm时试试这个函数：

(this.form.get('workFlowId') as FormArray).push(new FormGroup({
      'key' : new FormControl('username'),
      'value': new FormControl('mor')
}))

您的附加输入表单：

<form [formGroup]="inputForm" (ngSubmit)="onSubmit()">
<input [formControlName]="input1">
<input [formControlName]="input2">
</form>

你的控制器：

/* Additional formGroup definition */
this.form = this.formBuilder.group({
   input1: ['']
   input2: ['']
})

/* Submitting function to transfer data from inputform to destination array form */
onSubmit() {
(this.form.get('workFlowId') as FormArray).push(new FormGroup({
      'key' : new FormControl(inputForm.get('input1').value),
      'value': new FormControl(inputForm.get('input2').value)
}))
}