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

Question

我正在为我的桌子使用带有角度的 ag grid 社区版。

我喜欢制作带有验证功能的可编辑表格。

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

我的验证：

当用户点击保存按钮时。

用户应输入姓氏和资格。

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

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

请帮助我实现这一目标。我尝试了 cellstyle，但它不适合我的情况

下面是我的 Stackblitz 网址

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

Answer 1

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

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

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

初始化“保存尝试”：

isSaveAttempted = false;

然后分配给列定义（姓氏，资格）：

{
  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