Dynamic Columns Reactive Forms in Angular

Question

How can i add several columns if i add the "click here to add transportation field" like i want to add driver, contact number etc.... Once you click the modal, it will show you some options on what field to add. Please check the code link that I've made. here's also my codes below. Please check also the image here

CHECK THIS 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

You'll have to create a new FormGroup for the modal fields and then use this form's value to show or hide those specific fields from the main form

Also, since you're already creating those fields in the main form but assigning them undefined, it won't matter if they're actually present on the form or not if the form's value is all you care about.

So following these steps would fix your issue:

First: Create a new FormGroup for your Modal

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

Second: Create a variable on the class for configuring what needs to be visible/hidden from the main form:

formControlsVisibilityConfig;

Third: Read the value of the modal form on it's submission and assign it to formControlsVisibilityConfig. Also, hide the modal:

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

Fourth: Bind the form to the template:

<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>

Here's an Updated StackBlitz for your ref.

Answer 2

here is the edited stackblitz : https://stackblitz.com/edit/dynamic-columns-reactive-forms-d3xsnf?file=app%2Fapp.component.html

this link contains validation too :

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