带有 DropDown 和 ReactiveForm 的 Angular Kendo Grid

如何解决带有 DropDown 和 ReactiveForm 的 Angular Kendo Grid

我有一个剑道网格，为了简单起见，我已经把它删减了：

<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 { }