Question

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

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

在我的UI中，用户将不得不在输入中编写workFlowId，然后我想使用workFlowId作为FormArray的键将新的FormArray添加到表单中。

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

{“ workFlowId”：123，“ 123”：[{“ key”：“用户名”，“ 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)
}))
}

动态将FormArray添加到FormGroup

1 个答案: