单击AgGrid和CellRenderer + CellEditor

Question

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

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

应用程序的屏幕截图如下：在这里输入图像描述

我想提高它的操作使用单次点击，因为目前用户需要点击两次，以开始填充字段，我有singleClickEdit:真，但它不工作，有任何想法吗？

在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();
  }

  // ...
}

请参见在以下样本中实现的。