Kendo Angular 网格：响应式表单值为空

Question

我目前正在构建一个基于 Kendo Angular Grid 组件的可编辑网格。

我还使用 Reactive Forms 向 Grid 提供表单数据，如 this example 所示。其实我的代码和例子不太一样，不能使用command栏（设计组禁用）

现在，一切正常，除了 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
kendo-angular-网格：4.7.2

如有任何帮助，我们将不胜感激。 :)

Answer 1

嗯，出于某种原因，将 enumerable 属性设置为 true 即可解决问题。

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

Kendo Angular 网格：响应式表单值为空

Kendo Angular Grid: Reactive forms value is empty

kendo-ui

kendo-grid

angular

kendo-angular-ui