DevTools

A panel showing every field’s value, flags and errors, so “why is my form invalid?” is a question you can answer by looking.

The inspector lives in @modyra/core, and has two front-ends over the same state: a panel (mountMdyDevtools) you mount into any DOM, and an overlay Angular adds with a directive and a hotkey. Neither shows anything the other cannot.

The headless panel — any binding

The inspector ships in @modyra/core as a DOM panel mountable anywhere, so it works whatever renders the form. The examples under examples/ use it:

import { mountMdyDevtools } from "@modyra/core/devtools"; // framework-agnostic subpath entry

const unmount = mountMdyDevtools(form, document.getElementById("panel")!);
// re-renders on an interval; call unmount() to dispose

It shows the same masked state/value table and is styled by the same theme variables (mdy-devtools class).

Angular: the hotkey overlay

Mark a form as inspectable and press Ctrl+Shift+D:

<mdy-form [form]="form" mdyDevtools>…</mdy-form>

The hotkey opens a draggable overlay on the selected form — the registered form containing the focused element, falling back to the last registered one. Drag it by the title bar; close with ✕ or Escape (focus is returned to where it was). The overlay is a role="dialog" and receives focus when it opens.

What the panel shows

• Form state signals: valid, pending, submitting, submitCount, canSubmit.
• A per-field table — rows derived automatically from the registered fields — with columns field / value / valid / touched / dirty / pending / errors.
• Each error is prefixed with its origin: [validation], [async], [cross-field], [server].
• The live JSON value and the last submit errors.
• Click a field path to copy it to the clipboard.
• Filter rows by name, or show only invalid fields.

Sensitive values are masked

Values of fields whose path looks sensitive (contains password, token, secret, card, cvv, ssn, iban, …) are replaced with ••• in both the table and the JSON view. Add your own paths with:

<mdy-forms-devtools [form]="form" [maskFields]="['legacyPwd']" />

A collection’s rows are addressed the way they are everywhere else, so the rule reaches inside one and a path you list may name a row’s field: items.0.legacyPwd, or the collection itself to hide all of it.

File contents are never shown — File values render as [File: name (size)] metadata only. Other values are shown as JSON would carry them, so a Date reads as its ISO string rather than as an empty object.

Embedding and programmatic use

<mdy-forms-devtools [form]="form" />                     <!-- inline panel -->
<mdy-forms-devtools [form]="form" [fields]="[form.f.email]" expanded />

inject(MdyFormsDevtoolsService).toggle(form); // open/close the overlay

Hotkey configuration

providers: [
  { provide: MDY_DEVTOOLS_HOTKEY, useValue: "ctrl+alt+i" }, // rebind
  // or disable entirely (toggle() still works):
  { provide: MDY_DEVTOOLS_HOTKEY, useValue: null },
];

The default ctrl+shift+d collides with a built-in shortcut in some browsers — rebind it if that matters to your team.

Production builds

The devtools ship no providers and are only bundled when your code imports MdyDevtoolsDirective / MdyFormsDevtoolsComponent — standard tree shaking, nothing magic. To keep them out of production, guard the import site (e.g. render behind isDevMode() or an environment flag): an import that exists in shipped code is bundled like any other component.