Question

如果我要添加“单击此处以添加运输字段”，例如我想添加驱动程序，联系电话等，如何添加几列？...单击模态后，它将为您显示有关哪个字段的一些选项加上。请检查我创建的代码链接。这也是我的以下代码。请也在

处查看图片

检查此链接https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts

openModal(template: TemplateRef < any > ) {
  this.modalRef = this.modalService.show(template);
}

initGroup() {
  let rows = this.addForm.get('rows') as FormArray;
  rows.push(this.fb.group({
    description: [null, Validators.required],
    pickup_area: [null, Validators.required],
    pickup_time: [null, Validators.required],
    sign_board: [null, Validators.required],
    driver: [null],
    contact_number: [null],
    transportation_unit: [null],
    special_instructions: [null],
  }))
}

Answer 1

这是经过编辑的堆叠闪电战：https://stackblitz.com/edit/dynamic-columns-reactive-forms-d3xsnf?file=app%2Fapp.component.html

此链接也包含验证：

https://stackblitz.com/edit/dynamic-columns-reactive-forms-ytiiqp?file=app/custom-required-validator.ts

Answer 2

您必须为模态字段创建一个新的FormGroup，然后使用此表单的value从主form中显示或隐藏那些特定字段

此外，由于您已经在主表单中创建了这些字段，但已将它们分配给undefined，因此，如果表单中的值是您自己关心的，是否实际存在于表单上都没有关系关于。

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

首先：为您的模态创建一个新的FormGroup

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

第二个：在类上创建一个变量，用于配置需要从主表单中可见/隐藏的内容：

formControlsVisibilityConfig;

第三：读取提交的模式表单的值并将其分配给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>

这里是Updated StackBlitz供您参考。

Angular中的动态列反应形式

2 个答案: