Angular 中的动态列反应形式

Question

如果我添加 "click here to add transportation field" 就像我想添加驱动程序、联系电话等，我如何添加多个列...。单击模式后，它会显示一些关于要在哪个字段上的选项添加。请检查我制作的代码 link。下面也是我的代码。请同时检查此处的图像

检查这个 LINK 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

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

此外，由于您已经在主表单中创建了这些字段，但分配了它们 undefined，如果表单的值为 all，它们是否实际出现在表单上并不重要你关心。

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

首先：为你的Modal创建一个新的FormGroup

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

其次：在class上创建一个变量，用于配置主窗体需要visible/hidden的内容：

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 供您参考。

Answer 2

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

这个link也包含验证：

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

Angular 中的动态列反应形式

Dynamic Columns Reactive Forms in Angular

angular

angular-reactive-forms

angular-forms

angular4-forms