时间戳

首页 > 解决方案 > 在剑道网格中为“嵌套”字段创建表单组

angular - 在剑道网格中为“嵌套”字段创建表单组

问题描述

我正在尝试在单元格内编辑剑道网格元素。

我有一个剑道网格，其列定义如下：

<kendo-grid-column title="Beam ID" field="id" width="30px">
</kendo-grid-column>
<kendo-grid-column field="additional_info.name" title="Name">
</kendo-grid-column>

我按照此链接的第一个示例来实现单元内编辑表单：https ://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing/

在此行中定义表单组：

this.formBuilder.group({
 'id': dataItem.id,
 'additional_info.width': dataItem.additional_info.width
});

一切都适用于 ID 字段和每个“一级”字段。我无法在附加信息宽度等网格嵌套元素上进行编辑。

我不能补充说，这似乎只是“表单位置”的问题，因为通过一些警告，我了解到“单元格编辑”从单击开始，然后在远离列的位置单击结束。

我什么都试过了。有什么建议吗？谢谢！

标签： angularkendo-uikendo-gridformgroups

解决方案

不知道你是否找到了答案，因为它已经半年了。这是一个很好的解决你的问题 如何使用formControlName和处理嵌套的formGroup？

但总而言之，当您使用嵌套对象创建表单组时，您必须为这些对象创建额外的表单组。这意味着您最终会得到一个包含嵌套表单组的表单组

    this.formBuilder.group({
        id: dataItem.id,
        additional_info: this.formBuilder.group({
           width: dataItem.additional_info.width
        })
    });

在某些情况下（我相信当您使用模板自定义列时）您可能还必须使用 formControl 来绑定正确的值。

    <kendo-grid-column [title]="Age" filter="numeric" field="additional_info.age" editor="numeric">
         <ng-template kendoGridEditTemplate let-formGroup="formGroup">
            <kendo-numerictextbox
                (valueChange)="onAgeChange($event)"
                [formControl]="formGroup.get('additional_info.age')"
            >
            </kendo-numerictextbox>
         </ng-template>
    </kendo-grid-column>

推荐阅读