Блог

Я использую ag grid community edition с angular для своей таблицы.

Мне нравится создавать редактируемую таблицу с проверкой.

Если проверка не удалась, мне нужно показать ошибку с красной рамкой в ячейке ag, как показано на рисунке ниже

Мое Подтверждение :

Когда Пользователь нажимает кнопку сохранить.

Пользователь должен ввести как фамилию, так и квалификацию.

Если пользователь вводит что-либо из этого, мне нужно показать красную рамку в ячейке

Если пользователь не ввел и то, и другое, то он может пройти

Пожалуйста, помогите мне достичь этого. Я попробовал использовать cellstyle, но он не подходит для моего случая

Ниже приведен мой URL-адрес Stackblitz

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

Один из возможных способов-использовать cellClassRules один глобальный флаг для сигнализации о попытке сохранения.

Настройте этот простой объект в качестве члена класса:

   cellRules = {
    'rag-red': params => this.isSaveAttempted amp;amp; !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
 

ДЕМОНСТРАЦИЯ