带有 DropDown 和 ReactiveForm 的 Angular Kendo Grid答案

【问题标题】：Angular Kendo Grid with DropDown and ReactiveForm带有 DropDown 和 ReactiveForm 的 Angular Kendo Grid
【发布时间】：2021-02-24 13:14:50
【问题描述】：

我有一个剑道网格，为了简单起见，我将其删减了：

<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 之外的所有字段都已填充，我可以'不明白为什么 - 我想我在某处缺少绑定？

【问题讨论】：

如果您能提供minimal reproducible example，那就太好了。我假设这大约是Teleriks grid editing。您可以将该示例与您的示例进行比较并对其进行修改以重现您的问题。
很难判断没有运行示例，但我的猜测是[formControlName]="'customertype'" 无法正常工作，因为它需要将 FormGroup 绑定到父元素。您可能想尝试这些方面的东西[formControl]="formGroup.get('customertype')"
@MikeS。 - 我会尝试添加一个工作版本
@Philipp - 我也试过了，我试过很多组合。

标签： angular kendo-grid kendo-ui-angular2 kendo-dropdown

【解决方案1】：

我会在这里添加它以防它帮助其他人。由于我使用 Chrome 工具对此进行了测试，因此我没有遇到任何典型的错误、模块丢失等问题。因此，我假设所有内容都已正确加载。我仔细检查了模块，但我错过了ReactiveFormsModule。因此，虽然我将控件用作响应式表单，但模块没有加载，但我没有收到任何错误来表明这一点 - 修复：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    ReactiveFormsModule
    ]
})
export class NameModule { }

【讨论】：