Closed embryologist closed 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>
@embryologist Did you find out how to do it? If so, can you share what was wrong with your original code above?
My form array html mark up works perfectly,
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,