是否可以将反应式表单数组控件绑定到ngx-datatable？

Question

我的表单数组html标记完美运行，（缩短了快照）

 <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>

现在我知道我们可以根据内联ngx-datatable doc定义列。

是否有可能将这些控件绑定到ngx-datatable定义的列

<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

是的，这是可能的。以下是工作示例：

<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>

在您的组件文件中，Form应定义如下：

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
}