我可以阻止 Devextreme Angular DataGrid 表单中的 Enter 键提交表单吗？

Question

我的应用程序中有一个复杂的 DataGrid 表单，其中包含许多不同的字段，包括文本区域。每当我尝试在任何文本相关字段上按 Enter 时，表单都会尝试提交，然后弹出验证消息。我可以以某种方式重写所有字段的输入键行为吗？

我在不同的地方尝试了 event.stopPropagation() 和 event.preventDefault() 以及 (onEnterKey) 事件，但似乎没有任何效果。如果数据网格或表单至少有一个属性来防止按下回车键时执行此保存操作，那就太好了。

这是来自他们的页面的 devextreme 演示代码。我有非常相似的结构。

<div id="data-grid-demo">
  <dx-data-grid
    id="gridContainer"
    [dataSource]="dataSource"
    keyExpr="ID"
    [showBorders]="true"
  >
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxo-editing
      mode="form"
      [allowUpdating]="true"
      [allowAdding]="true"
      [allowDeleting]="true"
    >
    </dxo-editing>

    <dxi-column dataField="Prefix" caption="Title" [width]="70"></dxi-column>
    <dxi-column dataField="FirstName"></dxi-column>
    <dxi-column dataField="LastName"></dxi-column>
    <dxi-column dataField="Position" [width]="170"></dxi-column>
    <dxi-column dataField="StateID" caption="State" [width]="125">
      <dxo-lookup [dataSource]="states" displayExpr="Name" valueExpr="ID">
      </dxo-lookup>
    </dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"> </dxi-column>
    <dxi-column dataField="Notes" [visible]="false">
      <dxo-form-item
        [colSpan]="2"
        editorType="dxTextArea"
        [editorOptions]="{ height: 100 }"
      >
      </dxo-form-item>
    </dxi-column>
  </dx-data-grid>
</div>

Answer 1

我发现这个工作可能对你有帮助。您可以尝试并让我知道它是否符合您的目的。 在数据网格上添加

onKeyDown

函数。像这样的东西，

 <dx-data-grid
    id="gridContainer"
    [dataSource]="dataSource"
    keyExpr="ID"
    [showBorders]="true"
    (onKeyDown)="onKeyDownFunction($event)"
  >

然后在您的

*.ts

文件上

onKeyDownFunction(e: any) {
    if (e.event.key === "Enter") {
      e.event.preventDefault();
    }
  }