Headless validation

Two tools cover validation outside the normal UI flow.

In-app: api.validateData()

For a rendered view, validate programmatically through the API service:

const result = await this.api.validateData({
  emitValidationEvent: true,
  includeHidden: false,
  includeDisabled: false,
});
// result: { isValid: boolean, issues: [{ elementName, dataPath, errors[] }] }

Standalone: <ngx-view-builder-validator>

A component with no visible UI that loads a structure + data, runs the full runtime validation (including expressions), and emits the result. Designed for validation services, e.g. a small Angular app rendered server-side or in a headless browser that your backend calls to verify submissions with the same rules the form used.

<ngx-view-builder-validator
  [pageJson]="structure"
  [dataJson]="submittedData"
  [autoValidateOnInit]="true"
  (validated)="onValidated($event)"
  (validationError)="onError($event)"
/>

Input	Default	Purpose
pageJson / dataJson	-	Structure and data to validate
autoValidateOnInit	true	Validate immediately
backendUrl / validatePath	none / /validate	Set either one to a full url to post to your own validation endpoint instead
waitMs / timeoutMs	300 / 45000	Stabilisation delay and timeout
headlessApiKey	__NGX_VIEW_BUILDER__	Global API key for headless drivers
sessionHeaderName / sessionKey / requestHeaders	-	Auth headers for the remote mode

Without backendUrl the component validates in the page with the same rules the runtime uses, which is what you want in almost every case. Before 0.12.3 it posted to http://127.0.0.1:8010/validate unless told otherwise; pass backendUrl if you relied on that.

You can also call validate() on the component instance for on-demand runs.

Global headless API

For E2E tests and headless automation, expose a global validation API at startup:

inject(ForgeInitializerService).load({
  exposeHeadlessValidationApi: true,
  headlessValidationApiKey: '__NGX_VIEW_BUILDER__',
});

The driver (Playwright, Puppeteer...) can then invoke validation through window.__NGX_VIEW_BUILDER__:

const result = await page.evaluate(
  ([structure, data]) => window.__NGX_VIEW_BUILDER__.validateData(structure, data),
  [structure, data],
);
// { isValid, issues: [{ elementName, dataPath, errors }] }

Why server-side validation matters

Client-side rules protect UX, not integrity. Re-run the same structure + data through the validator on trusted infrastructure before persisting anything. The definitions are identical, so rules never drift between client and server.