<div class="card m-3">
  <h5 class="card-header">Dynamic Reactive form with Prime NG P-table</h5>
  <div class="card-body">
    <form [formGroup]="userForm">
      <div formArrayName="usersDetails">
        <p-table [value]="usersDetails.controls" [(selection)]="selectedUsers">
          <ng-template pTemplate="header">
            <tr>
              <th style="width: 5%">
              </th>
              <th style="width: 20%">Name</th>
              <th style="width: 30%">Email</th>
              <th style="width: 20%">Gender</th>
              <th>Date Of Birth</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-controls let-i="rowIndex">
            <tr [formGroupName]="i">
              <td>
                <p-tableCheckbox [value]="i+1"></p-tableCheckbox>
              </td>
              <td><input type="text" formControlName="name" class="form-control" /></td>
              <td> <input type="email" formControlName="email" class="form-control" />
                <span style="color:red" *ngIf="userDetailsControls(i)?.email.errors?.required">Email is Required</span>
                <span style="color:red" *ngIf="userDetailsControls(i)?.email.errors?.email">Please provide a valid
                  email</span>
              </td>
              <td>
                <p-dropdown [options]="genderOptions" formControlName="gender"></p-dropdown>
              </td>
              <td>
                <p-calendar appendTo="body" formControlName="dob" dateFormat="dd/mm/yy" showIcon="true"
                  showButtonBar="true" [maxDate]="maxDateValue"></p-calendar>
              </td>
            </tr>

          </ng-template>
        </p-table>
      </div>
    </form>
    <div style="margin-top: 10px;">
      <button class="btn btn-primary mr-1" (click)="onAdd()">Add New Row</button>
      <button [disabled]="usersDetails.controls.length === 1" class="btn btn-primary mr-1" (click)="onDelete()">Delete
        Selected Row</button>
      <button [disabled]="userForm.invalid" class="btn btn-primary mr-1" (click)="onSubmit()">Submit</button>
    </div>
  </div>
</div>
<p-toast [style]="{marginTop: '80px'}"></p-toast>
<div>
  {{data}}
</div>

import { Component, OnInit } from "@angular/core";
import {
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from "@angular/forms";
import { MessageService, SelectItem } from "primeng/api";

@Component({
  selector: "app-user-form",
  templateUrl: "./user-form.component.html",
  styleUrls: ["./user-form.component.scss"],
})
export class UserFormComponent implements OnInit {
  protected data;
  // Defined protected because it is using in HTML page
  protected maxDateValue = new Date();

  /**
   * Defining static gender option for dropdown
   */
  genderOptions: SelectItem[] = [
    { label: "Select Gender", value: null },
    { label: "Male", value: "male" },
    { label: "Female", value: "female" },
  ];
  selectedUsers: any = [];
  userForm: FormGroup;
  /**
   * Defined some values for Form - these values will be pre populated
   */
  values = [
    { name: "John", email: "John@gmail.com", gender: "male", dob: "20/1/1991" },
    {
      name: "David ",
      email: "david.restro@gmail.com",
      gender: "male",
      dob: "20/1/1965",
    },
  ];

  /**
   * Return user details form array
   */
  get usersDetails(): FormArray {
    return this.userForm.get("usersDetails") as FormArray;
  }

  /**
   *
   * @param formBuilder - Required Form builder to create angular reactive form
   * @param messageService - Message service is required to display messages (This is Prime NG message service)
   */
  constructor(
    private formBuilder: FormBuilder,
    private messageService: MessageService
  ) {}

  ngOnInit() {
    this.userForm = this.formBuilder.group({
      usersDetails: this.formBuilder.array([]),
    });
    this.populateData();
  }

  /**
   * Click on add button to add new row in prime ng table
   */
  onAdd() {
    this.userForm.markAllAsTouched();
    this.usersDetails.push(this.addControls());
  }

  /**
   * delete an existing row
   */
  onDelete() {
    if (this.selectedUsers.length < 1) {
      this.messageService.add({
        severity: "warn",
        summary: "Info",
        detail: "Please select a record to delete!",
      });
      return;
    }
    console.log(this.selectedUsers);
    for (var i = this.selectedUsers.length - 1; i >= 0; i--) {
      this.usersDetails.controls.splice(this.selectedUsers[i] - 1, 1);
    }
    this.messageService.add({
      severity: "success",
      summary: "Success",
      detail: "Selected records deleted!",
    });

    this.selectedUsers = [];
  }

  /**
   * click on  submit button
   */
  onSubmit() {
    this.data = JSON.stringify(this.usersDetails.value);
  }

  /**
   * return user detail controls for given index
   * @param index - number
   */
  userDetailsControls(index: number) {
    return this.usersDetails.controls[index]["controls"];
  }

  /**
   * Add control into Form
   */
  private addControls() {
    return new FormGroup({
      name: new FormControl(""),
      email: new FormControl("", [Validators.email, Validators.required]),
      gender: new FormControl(null),
      dob: new FormControl(""),
    });
  }

  /**
   * Populate data into Form
   */
  private populateData() {
    this.values.forEach((data, index) => {
      this.onAdd();
      this.usersDetails.controls[index].setValue(data);
    });
  }
}