0

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

我还使用 Reactive Forms 向 Grid 提供表单数据，如本示例所示。实际上，我的代码与示例中的代码不太一样，因为我不能使用命令列（被设计团队禁止）。

现在，一切正常，除了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 }...
  // ...
}

这是我的堆栈：

  • 角度：9.1.11
  • 剑道角网格：4.7.2

任何帮助将不胜感激。:)

4

1 回答 1

0

好吧，出于某种原因，将enumerable道具设置为 true 可以解决问题。

Object.defineProperty(form, c.field, { value: fc, writable: true, enumerable: true });
于 2020-08-27T11:15:55.637 回答