title: Dynamic Columns Reactive Forms in Angular
body: <p>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 <a href="https://i.stack.imgur.com/H9K06.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H9K06.png" alt="CHECK THIS IMAGE"></a></p>
  
  <p>CHECK THIS LINK <a href="https://stackblitz.com/edit/dynamic-columns-reactive-forms-gpwwac?file=app%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts</a></p>
  
  <pre><code>openModal(template: TemplateRef &lt; any &gt; ) {
    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],
    }))
  }
  </code></pre>