How to Dynamically Detect and Apply bg Color Changes to the Latest Added or Edited Row with Incorrect Data or Empty Cells in a dx-data-grid?

Question

how do we detect and apply bg-color changes to the latest added or edited row if it has wrong data in a cell or has some empty cells in a dx-data-grid for angular ts?

<dx-data-grid
  [dataSource]="dataSource"
  keyExpr="id"
  (onRowInserted)="onRowInserted($event)"
  (onRowUpdating)="onRowUpdating($event)"
  (onRowInserting)="onRowInserting($event)"
  (onRowUpdated)="onRowUpdated($event)">
  <!-- Defined columns and other configurations -->
</dx-data-grid>

onRowUpdating and onRowInserting if the user enters the wrong or empty value doesn't allow exiting from editing and make bg of that row red

Answer 1

Devextreme data grid has his own validation api.

Check demo datagrid validation.

column example:

 <dxi-column dataField="Phone">
    <dxi-validation-rule type="required"></dxi-validation-rule>
    <dxi-validation-rule
      type="pattern"
      [pattern]="pattern"
      message="Your phone must have &#34;(555) 555-5555&#34; format!"
    ></dxi-validation-rule>
  </dxi-column>