app.component.html

<div class="demo-container">
  <dx-data-grid
    [dataSource]="customers"
    keyExpr="ID"
    [repaintChangesOnly]="true"
    [showBorders]="true"
  >
    <dxo-editing
      [(changes)]="changes"
      mode="batch"
      [allowUpdating]="true"
    ></dxo-editing>
    <dxi-column dataField="CompanyName">
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="City">
      <dxi-validation-rule type="stringLength" [min]="4"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="Phone">
      <dxi-validation-rule
        type="pattern"
        message="Your phone must have '(555) 555-5555 format!'"
        [pattern]="pattern"
      ></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="Fax"></dxi-column>
    <dxi-column dataField="State"></dxi-column>
    <dxo-toolbar>
      <dxi-item>
        <div *dxTemplate>
          <dx-button
            text="Validate DataGrid"
            stylingMode="outlined"
            (onClick)="validateVisibleRows()"
          ></dx-button>
        </div>
      </dxi-item>
      <dxi-item name="saveButton"></dxi-item>
      <dxi-item name="revertButton"></dxi-item>
    </dxo-toolbar>
  </dx-data-grid>
</div>