validate and show the error in ag grid cell

Question

I am using ag grid community edition with angular for my table.

I like to make a editable table with validation.

If validation fails I need to show the error with red border in ag gird cell as like below image

My Validation :

When User clicks the save button.

The user should enter the both last name & qualification.

If user enters either any one of this, then I need to show the red border on the cell

If the user didn't entered both, then it can pass

Please help me achieve this. I tried with cellstyle, But it is not fitting for my case

Below is my Stackblitz url

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

Hello Rajesh, I am not familiar with ag-grid but found one article, where the author explains how to use FormArray with ag-grid. For me, it was difficult to understand, but maybe it can help you. blog.ag-grid.com/using-angular-forms-with-ag-grid — Ashot Aleqsanyan

robert robert · Accepted Answer · 2021-08-02T16:47:47

One possible way is to use cellClassRules with one global flag for signalling save attempt.

Setup this simple object as class member:

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

initialize "save attempt":

isSaveAttempted = false;

then assign to column defs (last name, qualification):

{
  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 rule in component (to make it work ng-deep is needed), but you can also add to styles.css and then no ng-deep.

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

once user clicks on 'Save` button:

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

Demo

validate and show the error in ag grid cell

1 Answers