Is it possible to bind a reactive form array controls to ngx-datatable?

Question

My form array html mark up works perfectly, (shortened snapshot)

 <div formArrayName="partners">
   <div class="row" *ngFor="let ctrl of this.patientRestrationForm.get('partners').controls; let i = index"[formGroupName]="i">
     <div class="col-xs-8">  
      <input type="text" class="form-control" formControlName="recordId">
     </div>
     <div class="col-xs-8">
       <input type="text" class="form-control" formControlName="patientFileId">
     </div>
 </div>

now I know that we can define columns according to in-line ngx-datatable doc.

is it possible to bind those controls to ngx-datatable defined columns

<div formArrayName="partners">
   <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
   [rows]="this.patientRestrationForm.get('partners').value">
   <ngx-datatable-column name="recordId">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
         <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
         {{value}}
         </span>
         <input [formControlName]="'recordId'" autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']"
         type="text" [value]="value" />
      </ng-template>
   </ngx-datatable-column>
   <ngx-datatable-column name="patientFileId">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" style="margin-top: 10px;">
         <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
         {{value}}
         </span>
         <input [formControlName]="'patientFileId'" autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']"
         type="text" [value]="value" />
      </ng-template>
   </ngx-datatable-column>
   </ngx-datatable>
</div>

Answer 1

Yes, it is possible.. Following is working sample:

<div formGroup="partnersForm"><div formArrayName="partners">
   <ngx-datatable #mydatatable class="material" [headerHeight]="50"     [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
   [rows]="this.patientRestrationForm.get('partners').value">
       <ngx-datatable-column name="recordId">
          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
             <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                 {{value}}
             </span>
             <div *ngIf="editing[rowIndex+ '-name']" [formGroupName]="rowIndex">
                 <input [formControlName]="'recordId'" autofocus   type="text" />
             </div>
      </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="patientFileId">
          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" style="margin-top: 10px;">
             <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                 {{value}}
             </span>
             <div *ngIf="editing[rowIndex+ '-name']" [formGroupName]="rowIndex">
              <input [formControlName]="'patientFileId'" autofocus type="text" />
             </div>
          </ng-template>
       </ngx-datatable-column>
   </ngx-datatable>
</div></div>

In Your Component file, Form should be defined like this:

createForm() {
    this.partnersForm = this.fb.group({
        partners: this.fb.array(partnersDataList)
    });

    this.subscriptions.push(
        this.partnersForm.valueChanges.subscribe(() => this.onValueChange())
    );
    this.onValueChange();
}

onValueChange() {
    // Listen for values in form fields, NO need to use change or blur events in controls
    // with --> this.partnersForm.value
}

Answer 2

Coming back here in ran into same issue here how i solved it

<form [formGroup]="editProductForm">
    <div formArrayName="productRows">
      <ngx-datatable
        #projectBulkEditTable
        [rows]="formTableRows"
        class="bootstrap fullscreen ngx-datatable"
        [loadingIndicator]="loadingIndicator"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="70"
        [reorderable]="reorderable"
        [swapColumns]="swapColumns"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [virtualization]="false"
        [selected]="selected"
      >


        <ngx-datatable-column name="Name">
          <ng-template ngx-datatable-header-template let-column="column">
            Product Name
          </ng-template>
          <ng-template
            ngx-datatable-cell-template
            let-rowIndex="rowIndex"
            let-row="row"
            let-value="value"
          >
            <ng-container
              *ngIf="row.get('isEditable').value"
              [formGroupName]="rowIndex"
            >
              <input
                type="text"
                formControlName="productName"
                class="form-control"
              />
            </ng-container>

            <ng-container *ngIf="!row.get('isEditable').value">
              {{ row.value.productName }}
            </ng-container>
          </ng-template>
        </ngx-datatable-column>




        <ngx-datatable-column name="Action">
          <ng-template ngx-datatable-header-template let-column="column">
            Action
          </ng-template>
          <ng-template
            ngx-datatable-cell-template
            let-rowIndex="rowIndex"
            let-row="row"
            let-value="value"
          >
            <ng-container [formGroupName]="rowIndex">
              <button
                class="btn btn-info btn-sm mb-5 mx-2"
                (click)="editRow(row, rowIndex)"
              >
                <span class="fas fa-edit" aria-hidden="true"></span>
              </button>

              <button
                class="btn btn-success btn-sm mb-5"
                (click)="saveRow(row, rowIndex)"
              >
                <span class="fas fa-check" aria-hidden="true"></span>
              </button>
            </ng-container>
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </div>
  </form>

The issues were rows passed into ngx data has to be like this

 this.formTableRows = (this.editProductForm.get(
            "productRows"
          ) as FormArray).controls;