问题描述
<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 之外的所有字段我不明白为什么 - 我想我在某处缺少绑定?
解决方法
我会在这里添加它,以防它对其他人有帮助。由于我使用 Chrome 工具对此进行了测试,因此我没有遇到任何典型错误、模块丢失等问题。因此,我假设所有内容都已正确加载。我仔细检查了该模块,发现遗漏了 ReactiveFormsModule
。因此,虽然我将控件用作响应式表单,但该模块并未加载,但我没有收到任何错误来表明这一点 - 修复:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
...
],imports: [
...,ReactiveFormsModule
]
})
export class NameModule { }