单击 AgGrid 和 CellRenderer + CellEditor

Question

我使用 AgGrid 创建了一个表单，该任务的目标是仅对前端进行表单验证，其中前 3 个字段是必填字段，接下来的 3 个字段是可选的。

我使用 CellRenderer 完成了这项任务 - 执行检查字段是否为空，如果为空则添加错误消息，CellEditor - 基本上它是输入并添加一个属性将脏状态设置为 false 显示错误消息。

以下应用程序的屏幕截图： enter image description here

我想增强它以使用单击操作，因为当前用户需要单击两次才能开始填充该字段，我有 singleClickEdit: true 但它不起作用，有什么想法吗？

在 codeSandbox 片段上复制了问题：https://codesandbox.io/s/gallant-dew-s4n8cm?file=/src/app/app.component.html

Answer 1

所以在这个例子中发生的事情是你有一个列 singleClickEdit=true 也有一个自定义单元格编辑器。

由于它是一个自定义组件，因此您可以在呈现输入元素时关注它。

一个简单的方法是给输入一个 id：

<input
  #input
  [ngClass]="{ 'invalid': !valid }"
  [(ngModel)]="cellValue"
  (ngModelChange)="handleValueChange()"
  (focus)="makeDirty()"
/>

然后执行单元格编辑器事件afterGuiAttached以关注输入：

export class ValidateInputEditorComponent extends ValidateInputCell
  implements ICellEditorAngularComp {

  @ViewChild("input") input;

  afterGuiAttached() {
    this.input.nativeElement.focus();
  }

  // ...
}

在 following sample 中看到这个实现。

单击 AgGrid 和 CellRenderer + CellEditor

single click with AgGrid and CellRenderer + CellEditor

ag-grid

angular