swimlane / angular-data-table

A feature-rich but lightweight ES6 AngularJS Data Table crafted for large data sets!
http://swimlane.github.io/angular-data-table/
MIT License
577 stars 141 forks source link

How to bind form controls in ng-template inside ngx-datatable to reactive form array, #299

Closed embryologist closed 6 years ago

embryologist commented 6 years ago

My form array html mark up works perfectly,

 <div formArrayName="partners">
                        <div class="row" *ngFor="let ingredientCtrl of this.patientRestrationForm.get('partners').controls; let i = index" style="margin-top: 10px;"
                          [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 class="col-xs-8">
                            <input type="text" class="form-control" formControlName="partnerFileId">
                          </div>
                          <div class="col-xs-8">
                            <input type="text" class="form-control" formControlName="patientName">
                          </div>
                          <div class="col-xs-8">
                            <input type="text" class="form-control" formControlName="startDate">
                          </div>
                          <div class="col-xs-8">
                            <input type="text" class="form-control" formControlName="endDate">
                          </div>
                        </div>
                      </div>

I am trying to bind those controls in inline-datatable,

the best That I could do is the following but its not working, any help please,

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

                        <ngx-datatable-column name="startDate">
                          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" *ngFor="let ingredientCtrl of this.patientRestrationForm.get('partners').controls; let i = index"
                            style="margin-top: 10px;" [formGroupName]="i">
                            <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                              {{value}}
                            </span>
                            <input [formControlName]="'startDate'" autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']"
                              type="text" [value]="value" />
                          </ng-template>
                        </ngx-datatable-column>
                        <ngx-datatable-column name="endDate">
                          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" *ngFor="let ingredientCtrl of this.patientRestrationForm.get('partners').controls; let i = index"
                            style="margin-top: 10px;" [formGroupName]="i">
                            <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                              {{value}}
                            </span>
                            <input [formControlName]="'endDate'" autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']"
                              type="text" [value]="value" />
                          </ng-template>
                        </ngx-datatable-column>
                      </ngx-datatable>
dstj commented 6 years ago

@embryologist Did you find out how to do it? If so, can you share what was wrong with your original code above?