---
title: "Development Validation"
framework: angular
version: "36.1.0"
---

# Development Validation

AG Grid can validate your configuration during development and report problems that are otherwise easy to miss in the console. Enable these diagnostics in development builds only — they are not part of the `AllCommunityModule` / `AllEnterpriseModule` bundles, so production stays small.

## Enabling Validation

Call `enableDevValidations` once, before any grid is created:

```js
import { enableDevValidations } from 'ag-grid-community';

if (process.env.NODE_ENV !== 'production') {
    enableDevValidations();
}
```

This is equivalent to registering the module directly with `ModuleRegistry.registerModules([ValidationModule])`.

Without the module, console messages are reduced to an error code and a documentation link rather than the full text.

## Options

Pass options to `enableDevValidations` to configure:

```js
import { enableDevValidations } from 'ag-grid-community';

enableDevValidations({
    showOverlayOn: ['deprecation', 'warning', 'error'],
    throwOn: ['warning', 'error'],
    suppress: [],
});
```

If you register the module explicitly (instead of using `enableDevValidations`), then pass the same options via `ValidationModule.with({ showOverlayOn: ['deprecation', 'warning', 'error'], throwOn: ['warning', 'error'], suppress: [] })`

Configuration is global and applies to every grid on the page, with the options from the last call being used.

### Overlay

The overlay lists the diagnostics captured for a grid on top of that grid, with controls to copy them or dismiss the overlay. It is shown by default.

Diagnostics have one of three severities:

- `'deprecation'` — use of a deprecated option or feature
- `'warning'` — a likely misconfiguration the grid can recover from
- `'error'` — an invalid configuration

Set `showOverlayOn` to an array of the severities to show. For example, to show warnings and errors but not deprecations:

```js
enableDevValidations({ showOverlayOn: ['warning', 'error'] });
```

Defaults to `['deprecation', 'warning', 'error']` (every severity). Pass `[]` to hide the overlay.

In the example below, a column definition includes a property the grid does not recognise, so the resulting warnings surface in the overlay:

#### Overlay

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  AllCommunityModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllCommunityModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    // A stray property the grid does not recognise (as a prop-spreading wrapper might add),
    // surfacing warnings #307 (per property) and #310 (summary) in the overlay.
    { field: "make", notAColumnProperty: true } as ColDef,
    { field: "model" },
    { field: "price" },
  ];
  rowData: any[] | null = [
    { make: "Tesla", model: "Model Y", price: 64950 },
    { make: "Ford", model: "F-Series", price: 33850 },
    { make: "Toyota", model: "Corolla", price: 29600 },
  ];
}

let api: GridApi;
```

[Live example: Overlay](https://www.ag-grid.com/examples/dev-validation/overlay/angular)

Each grid shows only its own diagnostics. A nested grid (such as a detail grid in a [Master / Detail](https://www.ag-grid.com/angular-data-grid/master-detail/) grid) surfaces its diagnostics on its own overlay, not the parent's. When grid creation fails before the grid exists (for example, a row model with no row-model module registered) there is no grid to overlay. A standalone panel is shown in its place.

### Throwing on Problems

`throwOn` turns matching diagnostics into thrown errors instead of console messages, so problems fail fast rather than scrolling past unnoticed. This suits automated workflows (for example, end-to-end test runs or AI-assisted development) where a hard failure is surfaced to be acted on immediately.

Set `throwOn` to an array of the [severities](#overlay) to throw on. For example, to throw on errors only:

```js
enableDevValidations({ throwOn: ['error'] });
```

Defaults to `[]` (never throws).

`throwOn` throws synchronously wherever a matching diagnostic is raised. That is not only at start-up, it also happens during API calls, data updates, and rendering. A throw can interrupt an operation part-way and leave the grid in an inconsistent state. Use `throwOn` with harnesses that recreate the grid on failure rather than carrying on with the same instance, and never in production.

### Suppressing Diagnostics

> **Warning**
>
> Suppressing diagnostics hides real problems and is a last resort. Reach for it only when the cause is outside your control, for example: a third-party wrapper you cannot change

`suppress` takes the error ids to ignore, for diagnostics you have reviewed and accepted. A suppressed id is kept out of the overlay and is never thrown by `throwOn`, but is still logged to the console once. Suppression is by id, so it silences every diagnostic with that number — not one specific occurrence.

For example, a third-party wrapper you cannot change spreads unrelated props onto your column definitions, so the grid reports properties it does not recognise — a per-property warning (`307`) and a summary (`310`). Suppress both while the source is out of your control:

```js
enableDevValidations({
    suppress: [
        307, // "did you mean …" raised for each unrecognised property
        310, // the "one or more properties are not recognised" summary
    ],
});
```

The id is the number shown in the console message and the overlay, for example `#310`.