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 - ＆gt;发布一些代码来获取一些代码;-)

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

1 个答案: