验证并显示 ag 网格单元格中的错误

Question

我正在为我的 table 使用带有 angular 的 ag 网格社区版。

我喜欢制作 editable table 并进行验证。

如果验证失败，我需要在 ag gird 单元格中用红色边框显示错误，如下图所示

我的验证：

当用户点击保存按钮时。

用户应输入姓氏和资格。

如果用户输入其中任何一个，那么我需要在单元格上显示红色边框

如果用户都没有输入，则可以通过

请帮我实现这个。我试过 cellstyle，但它不适合我的情况

下面是我的 Stackblitz url

https://stackblitz.com/edit/angular-ivy-fq2wvt?file=src%2Fapp%2Fapp.component.ts

Answer 1

一种可能的方法是使用 cellClassRules 和一个全局标志来发出保存尝试信号。

将此简单对象设置为 class 成员：

  cellRules = {
    'rag-red': params => this.isSaveAttempted && !params.value
  };

初始化“保存尝试”：

isSaveAttempted = false;

然后分配给列 defs（姓氏、资格）：

{
  headerName: 'Last Name',
  field: 'lastName',
  editable: true,
  cellClassRules: this.cellRules // <-- here
},
{ headerName: 'Address', field: 'address', editable: true },
{
  headerName: 'Qualification',
  field: 'qualification',
  editable: true,
  cellClassRules: this.cellRules // <-- here
}

组件中的

css 规则（要使其工作需要 ng-deep），但您也可以添加到 styles.css 然后不添加 ng-deep.

:host::ng-deep .rag-red {
  border: 3px solid red !important;
}

一旦用户点击“保存”按钮：

  onSave(): void {
    this.isSaveAttempted = true;
    this.gridApi.redrawRows(); <-- this will trigger redraw and red borders

Demo

验证并显示 ag 网格单元格中的错误

validate and show the error in ag grid cell

ag-grid

angular