Kendo Angular Grid: Reactive forms 值為空

Question

我目前正在構建一個基於Kendo Angular 網格組件的可編輯網格。

我還使用 Reactive Forms 向網格提供表單數據，如本例所示。 實際上，我的代碼與示例中的不太一樣，因為我不能使用命令列（設計團隊禁止使用）。

現在，一切正常，除了form.value是空的......

這是我的組件的代碼：

<!-- my-grid.component.html -->
<!-- Code voluntary simplified to improve readability -->

<kendo-grid
  #grid
  [data]="rows"
  [selectable]="{ mode: 'single', checkboxOnly: false, enabled: true }"
>
  <ng-template kendoGridToolbarTemplate>
    <button (click)="editHandler()">Edit</button>
    <button (click)="saveHandler()">Save</button>
  </ng-template>

  <kendo-grid-checkbox-column [width]="48" [style]="{ 'text-align': 'center' }"></kendo-grid-checkbox-column>
  <kendo-grid-column
    *ngFor="let column of columns"
    [field]="column.field"
    [title]="column.title"
    [format]="column.getFormat()"
    [editor]="column.type"
    [hidden]="column.hidden"
    [width]="150"
  ></kendo-grid-column>
</kendo-grid>

// my-grid.component.ts
// Code voluntary simplified to improve readability

editHandler(): void {
  const form = {};
  this.columns
    .forEach((c) => {
      const fc = new FormControl(this.selectedRow[c.field]);
      Object.defineProperty(form, c.field, { value: fc, writable: true }); // I can't know in advance what would be the columns of my grid...
    });

  this.currentForm = new FormGroup(form); // at this moment, the FormGroup is correctly built.
  this._grid.editRow(this.selectedRowIndex, this.currentForm);
}

saveHandler(): void {
  const formValue = this.currentForm.value; // yields {} instead of { myField1: 1, myField2: 2 }...
  // ...
}

這是我的堆棧：

• angular：9.1.11
• 劍道角網格：4.7.2

任何幫助將不勝感激。 :)

Answer 1

好吧，出於某種原因，將enumerable prop 設置為 true 可以解決它。

Object.defineProperty(form, c.field, { value: fc, writable: true, enumerable: true });