如何处理多表单数组反应式表单方法

Question

我有一系列复选框。 对于每个复选框，有多个字段添加选项，例如在每个复选框下，我必须添加字段 1 和归档 2。 当复选框选中时，它应该推送到表单数组并推送字段。到该数组。如何处理反应式形式的多个表单数组？

我的html在下面。

<form [formGroup]="progbatchForm" (ngSubmit)="saveProgramBatch()" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-8 m-b-3">
<div class="form-group row"  >

<div class="col-sm-7"  >
<div *ngFor="let programsinterm of programsinterms">
<input 
name="programid" 
type="checkbox" id="{{programsinterm.id}}" 
(change)="ProgramsClick($event.target.getAttribute('id'))"
>
<label class="border-checkbox-label" for="{{programsinterm.id}}">{{programsinterm.programname}}</label>
<div formArrayName="programbatchdetails">
<div >
<table class="table">
<tr>
<th>Programbatch name</th>
<th>Programbatch type</th>
<td></td>
</tr>
<tr >
<td>
<input type="text"  
class="form-control" 
name="programbatchname"
formControlName="programbatchname"
>
</td>
<td>
<select name="programbatchtype"  class="form-control" formControlName="programbatchtype">
<option value="0">--select--</option>
<option *ngFor="let progbatchtype of programbacthtypes"  value="{{progbatchtype.id}}" >{{progbatchtype.programbatchtype}}</option>
</select>
</td>
<td></td>
</tr>
</table>
</div>    
</div>    
</div>
</div>

</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button *ngIf="!editstatus" class="btn btn-primary">Save</button>
</div>
</div>   
</form>

我需要这样的数组结构。

{
"programid":"5aeb057175d33208c5333852"
"programbatchdetails":[
{
programbatchname:"TEST name",
programbatchtype:"Regular",
programbatchid:"5aeb057175d33208c5333852"
},
{
programbatchname:"TEST name",
programbatchtype:"Regular",
programbatchid:"5aeb057175d33208c5333852"
}
]  
},
{
"programid":"5aeb057175d33208c5333852"
"programbatchdetails":[
{
programbatchname:"TEST name",
programbatchtype:"Regular",
programbatchid:"53sfafafasfasfasfasf"
},
{
programbatchname:"TEST name",
programbatchtype:"Regular",
programbatchid:"53sfafafasfasfasfasf"
}
]  
}

Answer 1

据我了解，您可以添加一个回调来更改事件并传递给复选框的索引。然后检查复选框是否被选中/取消选中，因为这两种更改都将触发更改事件。将复选框添加到您的 FormArray，并且由于您已传入复选框的索引，因此您可以遍历该复选框下的字段，检查它们是否已选中并将它们添加到您的 FormArray 中。

PS ->发布一些代码以获取一些代码;-(