Angular Kendo Grid with DropDown and ReactiveForm

Question

我有一个剑道网格，为了简单起见，我已经削减了:

<kendo-grid
[data]="customerTypes | async"
[height]="700"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[pageable]="false"
[sortable]="true"
(dataStateChange)="dataStateChange($event)"
(edit)="editHandler($event)"
(cancel)="cancelHandler($event)"
(save)="saveHandler($event)"
(remove)="removeHandler($event)"
(add)="addHandler($event)"
[navigable]="true"
>
<ng-template kendoGridToolbarTemplate>
<button [primary]="true" kendoGridAddCommand>Add new</button>
</ng-template>
<kendo-grid-column field="customertype" title="Customer Type" width="450">

<ng-template kendoGridEditTemplate
let-dataItem="dataItem"
let-column="column"
let-formGroup="formGroup">
<kendo-dropdownlist
[defaultItem]="'Select Customer Type...'"
[data]="customerTypesList"
[formControl]="formGroup.get('customertype')"
></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="Commands" width="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand [primary]="true">Edit</button>
<button kendoGridRemoveCommand>Remove</button>
<button kendoGridSaveCommand [disabled]="formGroup?.invalid">
{{ isNew ? "Add" : "Update" }}
</button>
<button kendoGridCancelCommand>
{{ isNew ? "Discard changes" : "Cancel" }}
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>

在组件中，我有一个填充下拉列表:

public customerTypesList = [
'Customer 1',
'Customer 2'
];

我也有addHandler来创建FormGroup:

public addHandler({ sender }) {
this.closeEditor(sender);
this.formGroup = new FormGroup({
id: new FormControl(),
custnumber: new FormControl(''),
customerlongname: new FormControl(''),
customershortname: new FormControl(''),
customertype: new FormControl('')
});
sender.addRow(this.formGroup);
}

saveHandler看起来像这样:

public saveHandler({ sender, rowIndex, formGroup, isNew }) {
const customerType: ICustomerType = formGroup.value;
this.editService.save(this.uri, customerType, isNew);
sender.closeRow(rowIndex);
}

当我在添加新记录时填充其他字段，并选择客户类型时，我向saveHandler添加一个中断以检查formGroup.value，并且除了customerType之外填充所有字段，我看不出为什么-我认为我在某个地方缺少绑定?

Answer 1

我将添加到这里，以防它对其他人有所帮助。由于我使用Chrome工具进行测试，我没有得到任何典型的错误，模块丢失等。所以，我假设所有东西都是正确加载的。我仔细检查了模块，我缺少ReactiveFormsModule。所以，虽然我使用控件作为一个响应式表单，模块没有加载，但我没有得到任何错误来指示这-修复:

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
...
],
imports: [
...,
ReactiveFormsModule
]
})
export class NameModule { }