angularkendo-uikendo-gridkendo-angular-ui

Kendo Angular Grid: Reactive forms value is empty


I'm currently building an editable grid based on the Kendo Angular Grid component.

I'm also using Reactive Forms to provide the form data to the Grid, as shown in this example. Actually, my code is not quite the same as in the example, as I can't use the command column (forbidden by the design team).

Right now, everything works fine, except that the form.value is empty...

Here is the code of my component:

<!-- 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 }...
  // ...
}

Here is my stack:

Any help would be greatly appreciated. :)


Solution

  • Well, for some reason, putting the enumerable prop to true solves it.

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