当前位置：文江博客话题详情

单击 AgGrid 和 CellRenderer +单元格编辑器

发布于 2025-01-10 20:03:05 字数 600 浏览 0 评论 0原文

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

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

以下应用程序的屏幕截图：在此处输入图像描述

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空袭的梦i 2025-01-17 20:03:05

因此，此示例中发生的情况是，您在还具有自定义单元格编辑器的列上设置了 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();
  }

  // ...
}

请参阅以下示例。

So what's happening in this example is that you have singleClickEdit=true on a column that also has a custom cell editor.

As it's a custom component, it is up to you to focus on the input element when it is rendered.

A simple way to do this is to give an id to the input:

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

Then implement the Cell Editor Event afterGuiAttached to focus on the input:

export class ValidateInputEditorComponent extends ValidateInputCell
  implements ICellEditorAngularComp {

  @ViewChild("input") input;

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

  // ...
}

See this implemented in the following sample.

回复收藏 0 原文

~没有更多了~