angular - Kendo Grid for Angular 2 Reactive FormArray
问题描述
我没有在剑道网格示例中找到一个好的、简单且透明的表单示例,其中剑道网格为 formArray,数组的每一行为表单组,每个单元格为 formcontrol
在另一个问题Batch editing in KendoUI Grid for Angular 2/4中有一个答案,但它不是那么透明。
我无法使这些标签起作用。
<form [formGroup]="formGroup"><kendo-grid
#grid
[data]="gridData" [formArray]="formArray" formArrayName="arrayGrid"
//[formGroup]="gridRow"// how to say each row is in this form group
[height]="410"
>
<ng-template kendoGridToolbarTemplate>
<button *ngIf="!isEditMode" (click)="editHandler()" class="k-button k-primary">Edit</button>
<button *ngIf="isEditMode" (click)="saveHandler()" [disabled]="!canSave()" class="k-button">Update</button>
<button *ngIf="isEditMode" (click)="cancelHandler()" class="k-button">Cancel</button>
</ng-template>
<kendo-grid-column field="ProductName" formControlName="ProductName" title="Name" width="200">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" formControlName="UnitPrice" title="Price" format="{0:c}" width="80" editor="numeric">
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" formControlName="UnitsInStock" title="In stock" width="80" editor="numeric">
</kendo-grid-column>
</kendo-grid></form>
有人做过这种实现吗?
解决方案
我已经找到了解决方案。这有点hacky,但效果很好。您必须使用网格的每个单元格模板中的 将每个 kendo-grid 数据项作为FormGroup
包含在 aFormArray
中来处理。ng-container
就我而言,我从外部服务请求数据,但如果你在本地拥有它,它几乎是一样的。这FormArray
也可以在一个更大的内部FormGroup
,但为了简单起见,我把它作为一个属性。
父组件.html
<kendo-grid #grid [data]="gridData">
<kendo-grid-column field="firstField" title="ID" width="150">
<ng-template kendoGridHeaderTemplate>
<span>First Field</span>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<ng-container [formGroup]="dataItem">
<app-my-component formControlName="firstField"></app-my-component>
</ng-container>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="secondField" width="145">
<ng-template kendoGridHeaderTemplate>
<span>Second Field</span>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<ng-container [formGroup]="dataItem">
<kendo-dropdownlist formControlName="secondField" [valueField]="'id'" [textField]="'text'"></kendo-dropdownlist>
</ng-container>
</ng-template>
</kendo-grid-column>
父组件.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridDataResult } from '@progress/kendo-angular-grid';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';
export class ParentComponent implements OnInit {
@ViewChild(GridComponent) private grid: GridComponent;
public formArray = this.formBuilder.array([]);
public gridData: GridDataResult;
constructor(
private formBuilder: FormBuilder,
private service: MyService) {
super();
}
ngOnInit() {
this.requestData();
}
public requestData() {
const response = this.service.getData().subscribe(data => {
const that = this;
response.forEach(function (data, i) {
that.formArray.insert(i, that.createDataFormGroup(data));
});
this.gridData = {
data: this.formArray.controls,
total: this.formArray.controls.length
};
});
}
推荐阅读
- machine-learning - 逻辑回归在简单示例中不起作用
- python - 迭代 python 3.5.6 和 3.7.3 之间的 pandas 数据帧差异
- postgresql - 将每个月插入自己的列(postgresql)
- android - 错误:无法解决:sqlite 受影响的模块:app
- r - SplitSeries 在 r 中的 Packed Bubble Highchart 中不起作用
- java - 什么时候需要使用实现 Iterable
- sql - 如何在 SQL 中对层次结构中的组织结构进行编码
- python - 如何修复 Keras LSTM 输入/输出尺寸?
- r - R根据两个不同的参数创建多个列
- php - Stripe - 结帐不支持没有名称的 SKUS