Angular 角坐标系中的动力柱反应形式

如果我添加“单击此处添加运输字段”，如我要添加驾驶员、联系电话等，我如何添加多个列。。。。单击模式后，它将显示要添加的字段的一些选项。请检查我制作的代码链接。下面是我的代码。请检查这里的图片

检查此链接

openmodel（模板：TemplateRef）{
this.modalRef=this.modalService.show（模板）；
}
initGroup（）{
让rows=this.addForm.get（'rows'）作为FormArray；
rows.push（this.fb.group({
描述：[空，验证程序。必需]，
拾取区域：[空，验证器。必需]，
拾取时间：[空，验证器。必需]，
签名板：[空，验证器。必填]，
驱动程序：[null]，
联系电话：[null]，
运输单位：[null]，
特殊说明：[null]，
}))
}

您必须为模式字段创建一个新的

表单组

，然后使用此表单的

值

在主

表单中显示或隐藏这些特定字段

此外，由于您已经在主窗体中创建了这些字段，但却将它们指定为未定义的

，因此，如果表单的值是您所关心的全部，那么这些字段是否实际存在于窗体上就无关紧要了

因此，以下步骤可以解决您的问题：

首先：为您的模板创建一个新的表单组

this.fieldSelectionForm = this.fb.group({
  driver: [true],
  contact_number: [true],
  transportation_unit: [true],
  special_instructions: [true]
});

Second:在类上创建一个变量，用于配置需要从主窗体可见/隐藏的内容：

formControlsVisibilityConfig;

Third:读取提交的模式表单的值，并将其分配给

formControlsVisibilityConfig

。另外，隐藏模式：

onFormSubmit() {
  console.log(this.fieldSelectionForm.value);
  this.formControlsVisibilityConfig = this.fieldSelectionForm.value
  this.modalRef.hide();
}

第四：将表单绑定到模板：

<h3>Transportation
    <button type="button" (click)="openModal(add)"> Click Here to add Transportation Fields</button>
</h3>
<br>
<form [formGroup]="addForm">
    <div formArrayName="rows">
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Pick Up Area</th>
                    <th>Pick Up Time</th>
                    <th>Sign Board</th>
          <th *ngIf="formControlsVisibilityConfig?.driver">Driver</th>
                    <th *ngIf="formControlsVisibilityConfig?.contact_number">Contact Number</th>
                    <th *ngIf="formControlsVisibilityConfig?.transportation_unit">Transportation Unit</th>
                    <th *ngIf="formControlsVisibilityConfig?.special_instructions">Special Instructions</th>
                    <th>Action</th>

                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let row of addForm.controls.rows.controls; let i = index" [formGroupName]="i">
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <textarea class="form-control" formControlName="description"></textarea>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="pickup_area">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="pickup_time">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="sign_board">
                            </div>
                        </div>
                    </td>

                    <td *ngIf="formControlsVisibilityConfig?.driver">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="driver">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.contact_number">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="contact_number">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.transportation_unit">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="transportation_unit">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.special_instructions">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="special_instructions">
                            </div>
                        </div>
                    </td>
                    <td>
                        <button type="button" 
              class="btn btn-square btn-danger btn-sm waves-effect waves-light" 
              (click)="onDeleteRow(i)"><i class="icofont icofont-ui-delete"></i> Remove
            </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button type="button" (click)="initGroup()"> Add Row</button>
    </div>
</form>



<ng-template #add>
    <div role="dialog" aria-hidden="true">
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
        <div class="login-card-modal">
            <form 
        class="md-float-material" 
        [formGroup]="fieldSelectionForm"
        (submit)="onFormSubmit()">
                <div class="auth-box">
                    <div class="row m-b-0">
                        <div class="col-md-12">
                            <h3 class="text-center">Add Fields</h3>
                        </div>
                        <div class="form-group row">
                            Driver
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="driver">
                            </div>
                        </div>
                        <div class="form-group row">
                            Contact number
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="contact_number">
                            </div>
                        </div>
                        <div class="form-group row">
                            Transportation Unit
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="transportation_unit">
                            </div>
                        </div>
                        <div class="form-group row">
                            Special Instructions
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="special_instructions">
                            </div>
                        </div>
                    </div>
                </div>
        <button type="submit">Submit</button>
            </form>
        </div>
    </div>
</ng-template>

运输
单击此处添加运输字段


描述
接送区
上车时间
标志牌
司机
联系电话
运输单位
特别说明
行动
去除
添加行
&时代；
添加字段
司机
联系电话
运输单位
特别说明
提交

---

这是一份参考文件。

这是编辑好的stackblitz：

此链接还包含验证：

---

据我所知，您试图在

formArray

中向

formGroup

动态添加另一个

formControl

。是吗？@SiddAjmera。对你说得对，莫代尔到底要做什么？@SiddAjmera。您必须从模式中的列表中选择要添加的字段。例如，如果在模式中选择驱动程序。它将添加一个名为driver.ok的新列。因此，模态

输入

应改为复选框。非常感谢您的努力！顺便说一下，如果是司机，请联系Number等。。。从模式中选择。那么它也应该是必需的。请编辑。谢谢你好。你明白了吗？我想这真的很难实现。你可以考虑寻找替代品。“约瑟夫，非常感谢。”你也面临同样的问题吗？你找到办法了吗？你好！非常感谢你的努力！顺便说一下，如果司机，联系电话等。。。从模式中选择。那么它也应该是必需的。请检查这个

<h3>Transportation
    <button type="button" (click)="openModal(add)"> Click Here to add Transportation Fields</button>
</h3>
<br>
<form [formGroup]="addForm">
    <div formArrayName="rows">
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Pick Up Area</th>
                    <th>Pick Up Time</th>
                    <th>Sign Board</th>
          <th *ngIf="formControlsVisibilityConfig?.driver">Driver</th>
                    <th *ngIf="formControlsVisibilityConfig?.contact_number">Contact Number</th>
                    <th *ngIf="formControlsVisibilityConfig?.transportation_unit">Transportation Unit</th>
                    <th *ngIf="formControlsVisibilityConfig?.special_instructions">Special Instructions</th>
                    <th>Action</th>

                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let row of addForm.controls.rows.controls; let i = index" [formGroupName]="i">
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <textarea class="form-control" formControlName="description"></textarea>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="pickup_area">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="pickup_time">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="sign_board">
                            </div>
                        </div>
                    </td>

                    <td *ngIf="formControlsVisibilityConfig?.driver">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="driver">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.contact_number">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="contact_number">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.transportation_unit">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="transportation_unit">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.special_instructions">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="special_instructions">
                            </div>
                        </div>
                    </td>
                    <td>
                        <button type="button" 
              class="btn btn-square btn-danger btn-sm waves-effect waves-light" 
              (click)="onDeleteRow(i)"><i class="icofont icofont-ui-delete"></i> Remove
            </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button type="button" (click)="initGroup()"> Add Row</button>
    </div>
</form>



<ng-template #add>
    <div role="dialog" aria-hidden="true">
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
        <div class="login-card-modal">
            <form 
        class="md-float-material" 
        [formGroup]="fieldSelectionForm"
        (submit)="onFormSubmit()">
                <div class="auth-box">
                    <div class="row m-b-0">
                        <div class="col-md-12">
                            <h3 class="text-center">Add Fields</h3>
                        </div>
                        <div class="form-group row">
                            Driver
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="driver">
                            </div>
                        </div>
                        <div class="form-group row">
                            Contact number
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="contact_number">
                            </div>
                        </div>
                        <div class="form-group row">
                            Transportation Unit
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="transportation_unit">
                            </div>
                        </div>
                        <div class="form-group row">
                            Special Instructions
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="special_instructions">
                            </div>
                        </div>
                    </div>
                </div>
        <button type="submit">Submit</button>
            </form>
        </div>
    </div>
</ng-template>