@dynamic-field-kit/angular 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @dynamic-field-kit/angular
 
+## 1.7.0
+
+### Minor Changes
+
+- Dirty-baseline rebasing, accessible validation errors, form-level message catalogs, and async field options across React, Vue, and Angular.
+- 9b06e3f: Validation messages can be set once per form via `useDynamicForm({ messages })`,
+  or process-wide via `setDefaultMessages`, instead of passing a string to every
+  validator on every field. Built-in validators now resolve their message when
+  they run rather than when the field description is built, which is what made a
+  catalog impossible before. A message passed directly to a validator still wins,
+  and the English defaults are unchanged when no catalog is supplied.
+
+  `ValidationContext` - already `validate`'s fourth argument - gains an optional
+  `t` resolver, so a hand-written validator can translate its own messages too.
+
+  Adds `validators.matches(otherFieldName)` for confirm-password and
+  confirm-email fields, which every consumer was hand-writing.
+
+  No locale bundles ship: the mechanism is here, the translations are yours.
+
+- a7358f9: Fix per-field `dirty`, which was measured against a baseline captured at mount
+  and never re-based - wrong after `reset(newValues)` on all three adapters, and
+  wrong on React and Vue for values that arrive after mount, where every field
+  reported dirty forever.
+
+  Adds `baselineValues` and `getDirtyValues()` to the form store on all three
+  adapters, and an `initialProperties` prop to `MultiFieldInput` for re-basing
+  without a store. Comparison moves from `!==` to `Object.is`, so a `NaN` numeric
+  field no longer reads as permanently dirty.
+
+  React's `useDynamicForm` no longer validates the same data twice per change.
+
+- 53ed45a: `options` can now return a promise, covering both dependent selects
+  (`optionsDeps`) and search-remote pickers (`onOptionsQuery`). Renderers receive
+  `optionsStatus` and `optionsError` alongside `options`.
+
+  `debounceMs` was declared on `FieldDescription`, published in the `.d.ts` and
+  read by no implementation anywhere - setting it did nothing. It now debounces
+  these loads.
+
+  Debounce, abort of a superseded request, and discarding a response that lands
+  out of order all live in core's `createOptionsLoader`, so the three adapters
+  share one implementation. Synchronous and static options are untouched and never
+  enter a loading state.
+
+- e35e876: `ariaDescribedBy` is now `${id}-error` when a field has an error instead of
+  being hard-coded `undefined`, and `makeErrorId` is exported so a custom renderer
+  can put the matching id on its message element. Without this,
+  `focusFirstInvalidField` had nothing to find for anyone following the official
+  renderer recipe.
+
+  Default renderers now render the validation message they were already being
+  handed - the one visible change in this release. Custom renderers are untouched,
+  so nobody gets two copies of their own message.
+
+  Development builds now warn when `FieldDescription.props` carries a key the
+  renderer prop contract owns, which 1.6.0 made possible to lose silently.
+
 ## 1.6.0
 
 ### Minor Changes

package/README.md

@@ -41,7 +41,7 @@ npm install @dynamic-field-kit/core@^1.5.0 @dynamic-field-kit/angular@^1.5.0
   `dirty`, `id` and the aria flags used to be missing here, which left an
   Angular renderer no way to tell whether a field had been touched
 - `DynamicFormOptions` — what `createDynamicFormStore` takes: `fields`,
-  `initialValues`, `validateOnBlur`, `validateOnChange`
+  `initialValues`, `validateOnBlur`, `validateOnChange`, `messages`
 - `LayoutConfig` / `ColumnLayoutConfig` / `RowLayoutConfig` /
   `GridLayoutConfig` — the layout config types, re-exported from core
 - `BaseLayoutConfig` / `ResponsiveLayoutConfig` — this adapter's historical
@@ -59,7 +59,15 @@ both packages:
 - `validators` — the built-in validator helpers (`required`, `email`, `minLength`, `compose`, …)
 - `FieldDescription` / `FieldTypeKey` / `FieldRendererProps` — the schema and
   renderer contracts every adapter shares
-- `ValidationResult` / `ValidationContext`
+- `ValidationResult` / `ValidationContext` — the context carries `signal` and the
+  optional `t` message resolver
+- `buildFieldRendererProps` / `makeFieldId` / `makeErrorId` /
+  `FIELD_RENDERER_PROP_KEYS` — the renderer prop contract. `makeErrorId(id)` is
+  what a custom renderer puts on its message element so `aria-describedby`
+  resolves
+- `createOptionsLoader` / `isAsyncOptions` — the async options engine
+- `createMessageResolver` / `setDefaultMessages` / `MessageCatalog` — validation
+  message catalog
 
 `createDynamicFormStore` keeps live validation synchronous - a validator declared or
 detected as async is never invoked on that path. Its `handleSubmit` runs one
@@ -170,6 +178,7 @@ import {
         [errors]="store.errors()"
         (onChange)="store.handleChange($event)"
         (onBlurField)="store.handleBlur($event)"
+        [initialProperties]="store.baselineValues()"
       ></dfk-multi-field-input>
       <button [disabled]="store.isSubmitting()">Save</button>
     </form>
@@ -181,6 +190,7 @@ export class MyForm {
     fields,
     initialValues: { country: 'VN' },
     validateOnBlur: true, // default
+    messages: { required: 'Bắt buộc' }, // optional; see Validation & conditions
   });
 
   // handleSubmit returns a handler, exactly like React and Vue.
@@ -188,26 +198,28 @@ export class MyForm {
 }
 ```
 
-| Member                              | Description                                                                       |
-| ----------------------------------- | --------------------------------------------------------------------------------- |
-| `data()`                            | Current form data, with `computeValue` fields applied                             |
-| `errors()`                          | `Record<string, string[]>`, keyed like `validateFields`                           |
-| `isValid()` / `isDirty()`           | Current synchronous validity / any value has changed                              |
-| `isValidating()`                    | An async validation pass is in flight                                             |
-| `isValidationComplete()`            | Every applicable validator finished and none is in flight                         |
-| `validationStatus()`                | `'valid'                                                                          | 'invalid' | 'pending'`— prefer it over`isValid`alone:`valid` cannot tell "nothing is wrong" from "nothing is wrong yet" |
-| `isSubmitting()` / `isSubmitted()`  | In-flight submit / at least one submit attempted                                  |
-| `touched()`                         | Fields that have been blurred                                                     |
-| `handleChange(data)`                | Replace the whole form data — bind to `(onChange)`                                |
-| `setFieldValue(name, value)`        | Change one field                                                                  |
-| `handleBlur(name)`                  | Mark touched, and validate when `validateOnBlur`                                  |
-| `setFieldTouched(name, value?)`     | Set touched explicitly                                                            |
-| `touchAll()`                        | Mark every field touched — `handleSubmit` already calls it                        |
-| `resetTouched()`                    | Clear touched only, leaving data/errors/dirty alone                               |
-| `validate()`                        | Validate now, returns a boolean                                                   |
-| `validateAsync()`                   | Validate now, awaiting Promise-based rules                                        |
-| `reset(values?)`                    | Back to `initialValues` (or the values given), clearing errors/touched/submission |
-| `handleSubmit(onValid, onInvalid?)` | Returns an async handler; calls `preventDefault`, validates, then dispatches      |
+| Member                              | Description                                                                                                    |
+| ----------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `data()`                            | Current form data, with `computeValue` fields applied                                                          |
+| `errors()`                          | `Record<string, string[]>`, keyed like `validateFields`                                                        |
+| `isValid()` / `isDirty()`           | Current synchronous validity / any value has changed                                                           |
+| `baselineValues()`                  | Signal holding the values `dirty` is measured against - `initialValues` until `reset(newValues)` replaces them |
+| `getDirtyValues()`                  | Only the entries differing from `baselineValues`, for PATCH-style submits                                      |
+| `isValidating()`                    | An async validation pass is in flight                                                                          |
+| `isValidationComplete()`            | Every applicable validator finished and none is in flight                                                      |
+| `validationStatus()`                | `'valid'                                                                                                       | 'invalid' | 'pending'`— prefer it over`isValid`alone:`valid` cannot tell "nothing is wrong" from "nothing is wrong yet" |
+| `isSubmitting()` / `isSubmitted()`  | In-flight submit / at least one submit attempted                                                               |
+| `touched()`                         | Fields that have been blurred                                                                                  |
+| `handleChange(data)`                | Replace the whole form data — bind to `(onChange)`                                                             |
+| `setFieldValue(name, value)`        | Change one field                                                                                               |
+| `handleBlur(name)`                  | Mark touched, and validate when `validateOnBlur`                                                               |
+| `setFieldTouched(name, value?)`     | Set touched explicitly                                                                                         |
+| `touchAll()`                        | Mark every field touched — `handleSubmit` already calls it                                                     |
+| `resetTouched()`                    | Clear touched only, leaving data/errors/dirty alone                                                            |
+| `validate()`                        | Validate now, returns a boolean                                                                                |
+| `validateAsync()`                   | Validate now, awaiting Promise-based rules                                                                     |
+| `reset(values?)`                    | Back to `initialValues` (or the values given), clearing errors/touched/submission                              |
+| `handleSubmit(onValid, onInvalid?)` | Returns an async handler; calls `preventDefault`, validates, then dispatches                                   |
 
 `MultiFieldInput` emits `(onBlurField)` with the field's name, driven by a
 `focusout` listener — so it works with any renderer, without the renderer
@@ -247,6 +259,13 @@ Any type you have not registered falls back to one of these. `file` emits a
 `File` (or `File[]` when `multiple` is set), `range` and `number` emit numbers,
 `checkbox` / `switch` emit booleans; everything else emits strings.
 
+Since 1.7.0 a default renderer also renders its validation message, as
+`<div id="{fieldId}-error" class="dfk-field-error" role="alert">`, which is what
+`aria-describedby` points at. Before that they were handed `error` and dropped
+it, so the form showed nothing. A registered custom renderer is unaffected — the
+node is emitted only where a default was used, so you never get two copies. Hide
+it with `.dfk-field-error { display: none }` if you want the old silence.
+
 ## DevTools
 
 ```html
@@ -339,6 +358,52 @@ your renderer component receives `error`, `disabled`, and `readOnly` inputs, and
 
 For submit-time whole-form validation, call `validateFields(fields, data)`.
 
+### Validation messages
+
+Set the built-in validators' messages once per form instead of on every field:
+
+```ts
+const store = createDynamicFormStore({
+  fields,
+  messages: { required: 'Bắt buộc', minLength: 'Tối thiểu {min} ký tự' },
+});
+```
+
+A message passed straight to a validator still wins, and any key omitted falls
+back to the English default. `setDefaultMessages(catalog)` sets a process-wide
+one for code calling `validateFields` directly. Full key list in the
+[core README](../core/README.md#validation-messages). **No locale bundles
+ship** — the mechanism is here, the translations are yours.
+
+Forward `ariaInvalid`, `ariaRequired` and `ariaDescribedBy` from your renderer
+too, and put `makeErrorId(id)` on whatever element shows the message.
+`focusFirstInvalidField` selects `[aria-invalid="true"]`, so a renderer that
+drops those props makes that helper silently do nothing. See
+[the recipes](../../docs/ui-kit-recipes.md#forward-the-aria-props).
+
+### Async options
+
+`options` may return a promise. The renderer receives `optionsStatus`
+(`'idle' | 'loading' | 'ready' | 'error'`), `optionsError` and
+`onOptionsQuery`:
+
+```ts
+{
+  name: 'assignee',
+  type: 'userPicker',
+  options: async (data, _rootData, ctx) =>
+    fetch(`/api/users?q=${ctx?.query ?? ''}`, { signal: ctx?.signal })
+      .then((r) => r.json()),
+  optionsDeps: (data) => [data.team],  // reload when this changes; default []
+  debounceMs: 300,                     // collapses rapid reloads into one fetch
+}
+```
+
+Superseded requests are aborted and out-of-order responses discarded, so the
+list always reflects the newest request. Static and synchronous options are
+untouched and never enter a loading state. See the
+[core README](../core/README.md#async-options).
+
 ## Repeatable field groups
 
 A field with `fields` renders as a repeatable group: `data[name]` becomes an array of items, each shaped by the nested `fields`, with "Add"/"Remove" controls rendered automatically.

package/dist/fesm2022/dynamic-field-kit-angular.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, Component, InjectionToken, inject, ViewContainerRef, ViewChild, ChangeDetectionStrategy, HostListener, signal, computed, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgIf, NgClass, NgFor, JsonPipe } from '@angular/common';
-import { fieldRegistry, buildFieldRendererProps, makeFieldId, indexGroupPathMap, applyComputedValues, validateFields, canAddGroupItem, canRemoveGroupItem, createGroupItem, validateFieldsAsync, collectFieldPaths } from '@dynamic-field-kit/core';
-export { FieldRegistry, collectFieldPaths, fieldRegistry, indexGroupPathMap, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
+import { fieldRegistry, makeErrorId, isAsyncOptions, createOptionsLoader, buildFieldRendererProps, makeFieldId, indexGroupPathMap, applyComputedValues, validateFields, canAddGroupItem, canRemoveGroupItem, createGroupItem, createMessageResolver, validateFieldsAsync, collectFieldPaths } from '@dynamic-field-kit/core';
+export { FIELD_RENDERER_PROP_KEYS, FieldRegistry, buildFieldRendererProps, collectFieldPaths, fieldRegistry, indexGroupPathMap, makeErrorId, makeFieldId, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
 
 class BaseInputComponent {
     cdr;
@@ -23,6 +23,10 @@ class BaseInputComponent {
     dirty;
     error;
     options;
+    optionsStatus;
+    optionsError;
+    /** Renderer-driven refetch for a search-remote field. */
+    onOptionsQuery;
     className;
     description;
     id;
@@ -48,7 +52,7 @@ class BaseInputComponent {
         return changes[prop] !== undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", readOnly: "readOnly", touched: "touched", dirty: "dirty", error: "error", options: "options", className: "className", description: "description", id: "id", ariaInvalid: "ariaInvalid", ariaDescribedBy: "ariaDescribedBy", ariaRequired: "ariaRequired", min: "min", max: "max", step: "step", accept: "accept", multiple: "multiple" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", readOnly: "readOnly", touched: "touched", dirty: "dirty", error: "error", options: "options", optionsStatus: "optionsStatus", optionsError: "optionsError", onOptionsQuery: "onOptionsQuery", className: "className", description: "description", id: "id", ariaInvalid: "ariaInvalid", ariaDescribedBy: "ariaDescribedBy", ariaRequired: "ariaRequired", min: "min", max: "max", step: "step", accept: "accept", multiple: "multiple" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Component,
@@ -75,6 +79,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], optionsStatus: [{
+                type: Input
+            }], optionsError: [{
+                type: Input
+            }], onOptionsQuery: [{
+                type: Input
             }], className: [{
                 type: Input
             }], description: [{
@@ -128,6 +138,8 @@ const KNOWN_PROPS = [
     'dirty',
     'error',
     'options',
+    'optionsStatus',
+    'optionsError',
     'className',
     'description',
     'id',
@@ -186,6 +198,9 @@ class DynamicInput extends BaseInputComponent {
                 this.inputInstance[prop] = this[prop];
             }
         }
+        if (changes['onOptionsQuery']) {
+            this.applyCallbackProps(this.inputInstance);
+        }
         if (changes['extraProps']) {
             this.applyExtraProps(this.inputInstance);
         }
@@ -204,12 +219,33 @@ class DynamicInput extends BaseInputComponent {
         this.compRef = undefined;
         this.inputInstance = undefined;
     }
+    /** The id `ariaDescribedBy` points at. See core's `makeErrorId`. */
+    errorNodeId() {
+        return makeErrorId(this.id ?? '');
+    }
+    /** `error` may arrive as a bare string, so index 0 would be a character. */
+    firstError() {
+        return Array.isArray(this.error) ? this.error[0] : this.error;
+    }
+    /**
+     * Whether the adapter should render the validation message itself.
+     *
+     * Asks the registry directly rather than reading a flag set by `render()`:
+     * `render()` runs in `ngAfterViewInit`, by which point this template's
+     * bindings have already been checked for the pass, and under `OnPush`
+     * nothing would mark them dirty again. A registered renderer owns its own
+     * error presentation, so only the built-in fallback gets a message here.
+     */
+    showDefaultError() {
+        return Boolean(!this.registry.get(this.type) && this.firstError() && this.id);
+    }
     render() {
         const Renderer = this.registry.get(this.type);
         this.cleanup();
         this.host.clear();
         if (!Renderer) {
             if (this.renderDefaultFallbackHTML5(this.type)) {
+                this.applyFallbackAria();
                 return;
             }
             this.renderError(`Unknown field type: ${this.type}`);
@@ -273,6 +309,7 @@ class DynamicInput extends BaseInputComponent {
             ...this.extraProps,
             value: this.value,
             onValueChange: (v) => this.emitValue(v),
+            onOptionsQuery: this.onOptionsQuery,
             label: this.label ?? '',
             placeholder: this.placeholder ?? '',
             required: this.required ?? false,
@@ -320,8 +357,22 @@ class DynamicInput extends BaseInputComponent {
                 instanceObj[prop] = this[prop];
             }
         }
+        this.applyCallbackProps(instance);
         this.applyExtraProps(instance);
     }
+    /**
+     * Props that are callbacks rather than resolved values, so they are not in
+     * `KNOWN_PROPS` / `FIELD_RENDERER_PROP_KEYS` and the loop above never sees
+     * them. Without this a renderer declaring `onOptionsQuery` always got
+     * `undefined` and could never trigger a search-remote refetch.
+     */
+    applyCallbackProps(instance) {
+        if (!instance) {
+            return;
+        }
+        instance['onOptionsQuery'] =
+            this.onOptionsQuery;
+    }
     applyExtraProps(instance) {
         if (!instance || !this.extraProps) {
             return;
@@ -348,6 +399,35 @@ class DynamicInput extends BaseInputComponent {
         this.valueChange.emit(value);
         this.onChange.emit(value);
     }
+    /**
+     * Puts the aria flags on whatever control the HTML5 fallback just built.
+     *
+     * Applied here, once, rather than in each of the fallback's branches: they
+     * hand-build an input, textarea, checkbox or select, and every one of them
+     * would otherwise need the same four lines. Without this the fallback emits
+     * the `{id}-error` node with nothing pointing at it, and
+     * `focusFirstInvalidField` - which selects `[aria-invalid="true"]` - still
+     * finds nothing on this adapter.
+     *
+     * `render()` re-runs on every ngOnChanges while the fallback is in use (there
+     * is no component instance to sync props into), so this stays current as the
+     * field's error comes and goes.
+     */
+    applyFallbackAria() {
+        const control = this.host.element.nativeElement.querySelector('input, select, textarea');
+        if (!control) {
+            return;
+        }
+        if (this.ariaInvalid !== undefined) {
+            control.setAttribute('aria-invalid', String(this.ariaInvalid));
+        }
+        if (this.ariaRequired !== undefined) {
+            control.setAttribute('aria-required', String(this.ariaRequired));
+        }
+        if (this.ariaDescribedBy) {
+            control.setAttribute('aria-describedby', this.ariaDescribedBy);
+        }
+    }
     renderDefaultFallbackHTML5(type) {
         const nativeEl = this.host.element.nativeElement;
         if (type === 'text' ||
@@ -479,7 +559,15 @@ class DynamicInput extends BaseInputComponent {
         this.host.element.nativeElement.appendChild(el);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DynamicInput, isStandalone: true, selector: "dfk-dynamic-input", inputs: { type: "type", extraProps: "extraProps" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<div #host style="display: contents;"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DynamicInput, isStandalone: true, selector: "dfk-dynamic-input", inputs: { type: "type", extraProps: "extraProps" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<div #host style="display: contents;"></div>
+    <div
+      *ngIf="showDefaultError()"
+      [id]="errorNodeId()"
+      class="dfk-field-error"
+      role="alert"
+    >
+      {{ firstError() }}
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicInput, decorators: [{
             type: Component,
@@ -488,7 +576,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [CommonModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<div #host style="display: contents;"></div>`,
+                    // *ngIf rather than @if: the peer range starts at Angular 16, and the
+                    // built-in control flow block syntax is 17+.
+                    template: `<div #host style="display: contents;"></div>
+    <div
+      *ngIf="showDefaultError()"
+      [id]="errorNodeId()"
+      class="dfk-field-error"
+      role="alert"
+    >
+      {{ firstError() }}
+    </div>`,
                 }]
         }], propDecorators: { type: [{
                 type: Input
@@ -545,10 +643,45 @@ class FieldInput {
     constructor(cdr) {
         this.cdr = cdr;
     }
+    // Async options only; a static or synchronous list allocates nothing here.
+    loader;
+    optionsState;
+    /** Bound into the template so a renderer can drive a search-remote refetch. */
+    onOptionsQuery = (query) => {
+        this.loader?.setQuery(query);
+    };
     ngOnChanges(_changes) {
+        this.syncOptionsLoader();
         this.rendererProps = this.buildProps();
         this.cdr.markForCheck();
     }
+    ngOnDestroy() {
+        this.loader?.dispose();
+    }
+    syncOptionsLoader() {
+        const field = this.fieldDescription;
+        if (!field || !isAsyncOptions(field)) {
+            // A field can be swapped for one with synchronous options. Without this,
+            // the stale optionsState would keep winning in buildFieldRendererProps
+            // (`optionsState ? optionsState.options : resolveOptions(...)`) and the
+            // old async list would be served forever, with the loader never disposed.
+            this.loader?.dispose();
+            this.loader = undefined;
+            this.optionsState = undefined;
+            return;
+        }
+        if (!this.loader) {
+            this.optionsState = { status: 'idle' };
+            this.loader = createOptionsLoader(field, (state) => {
+                this.optionsState = state;
+                this.rendererProps = this.buildProps();
+                // OnPush: an async arrival happens outside any event this view is
+                // checked for, so without this the options would load and never appear.
+                this.cdr.markForCheck();
+            });
+        }
+        this.loader.update(this.data ?? {}, this.rootData);
+    }
     buildProps() {
         const field = this.fieldDescription;
         if (!field) {
@@ -562,6 +695,7 @@ class FieldInput {
             id: makeFieldId(field, this.idPrefix),
             touched: this.touched,
             dirty: this.dirty,
+            optionsState: this.optionsState,
         });
         // Explicitly bound inputs override what the field description resolves to,
         // so a host can still drive options/disabled/error itself.
@@ -588,6 +722,8 @@ class FieldInput {
       [required]="p.required"
       [description]="$any(p.description)"
       [options]="$any(p.options)"
+      [optionsStatus]="p.optionsStatus"
+      [optionsError]="p.optionsError"
       [className]="p.className"
       [disabled]="p.disabled"
       [readOnly]="p.readOnly"
@@ -608,6 +744,7 @@ class FieldInput {
       "
       (focusout)="onBlurField.emit(fieldDescription!.name)"
       [extraProps]="p.extraProps"
+      [onOptionsQuery]="onOptionsQuery"
     ></dfk-dynamic-input>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DynamicInput, selector: "dfk-dynamic-input", inputs: ["type", "extraProps"], outputs: ["valueChange", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -628,6 +765,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [required]="p.required"
       [description]="$any(p.description)"
       [options]="$any(p.options)"
+      [optionsStatus]="p.optionsStatus"
+      [optionsError]="p.optionsError"
       [className]="p.className"
       [disabled]="p.disabled"
       [readOnly]="p.readOnly"
@@ -648,6 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       "
       (focusout)="onBlurField.emit(fieldDescription!.name)"
       [extraProps]="p.extraProps"
+      [onOptionsQuery]="onOptionsQuery"
     ></dfk-dynamic-input>
   `,
                 }]
@@ -700,6 +840,13 @@ class MultiFieldInput {
     cdr;
     fieldDescriptions = [];
     properties;
+    /**
+     * The values per-field `dirty` is measured against. Defaults to the first
+     * non-`undefined` `properties` this component sees. This adapter has no
+     * `form` shorthand, so pass `store.baselineValues()` here to keep `dirty`
+     * correct across `store.reset(newValues)`.
+     */
+    initialProperties;
     onChange = new EventEmitter();
     validityChange = new EventEmitter();
     /**
@@ -734,7 +881,7 @@ class MultiFieldInput {
     // component is client-rendered by the time ids matter, so a module counter
     // is enough.
     instanceId = nextInstanceId();
-    initialProperties = {};
+    firstSeenProperties = {};
     indexedErrorsSource;
     indexedErrors = new Map();
     indexedTouchedSource;
@@ -760,7 +907,8 @@ class MultiFieldInput {
     }
     /** Whether this field's value differs from the one the form opened with. */
     isFieldDirty(fieldName) {
-        return this.data[fieldName] !== this.initialProperties[fieldName];
+        const baseline = this.initialProperties ?? this.firstSeenProperties;
+        return !Object.is(this.data[fieldName], baseline[fieldName]);
     }
     fieldErrors(fieldName) {
         return this.errors?.[fieldName];
@@ -903,7 +1051,7 @@ class MultiFieldInput {
             // Baseline for the `dirty` flag: the values the form opened with, not
             // whatever `properties` happens to hold after later edits.
             if (!this.initialised) {
-                this.initialProperties = { ...this.properties };
+                this.firstSeenProperties = { ...this.properties };
                 this.initialised = true;
             }
         }
@@ -962,7 +1110,7 @@ class MultiFieldInput {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiFieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: MultiFieldInput, isStandalone: true, selector: "dfk-multi-field-input", inputs: { fieldDescriptions: "fieldDescriptions", properties: "properties", touched: "touched", errors: "errors", idPrefix: "idPrefix", layout: "layout", rootData: "rootData" }, outputs: { onChange: "onChange", validityChange: "validityChange", onBlurField: "onBlurField", touchedChange: "touchedChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: MultiFieldInput, isStandalone: true, selector: "dfk-multi-field-input", inputs: { fieldDescriptions: "fieldDescriptions", properties: "properties", initialProperties: "initialProperties", touched: "touched", errors: "errors", idPrefix: "idPrefix", layout: "layout", rootData: "rootData" }, outputs: { onChange: "onChange", validityChange: "validityChange", onBlurField: "onBlurField", touchedChange: "touchedChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0, template: `
     <div
       class="p-4 border rounded-lg bg-gray-50"
       [ngClass]="{
@@ -1039,7 +1187,7 @@ class MultiFieldInput {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: MultiFieldInput, selector: "dfk-multi-field-input", inputs: ["fieldDescriptions", "properties", "touched", "errors", "idPrefix", "layout", "rootData"], outputs: ["onChange", "validityChange", "onBlurField", "touchedChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldInput, selector: "dfk-field-input", inputs: ["fieldDescription", "data", "rootData", "value", "options", "disabled", "readOnly", "error", "validationControlled", "touched", "dirty", "idPrefix"], outputs: ["onValueChangeField", "onBlurField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: MultiFieldInput, selector: "dfk-multi-field-input", inputs: ["fieldDescriptions", "properties", "initialProperties", "touched", "errors", "idPrefix", "layout", "rootData"], outputs: ["onChange", "validityChange", "onBlurField", "touchedChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldInput, selector: "dfk-field-input", inputs: ["fieldDescription", "data", "rootData", "value", "options", "disabled", "readOnly", "error", "validationControlled", "touched", "dirty", "idPrefix"], outputs: ["onValueChangeField", "onBlurField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiFieldInput, decorators: [{
             type: Component,
@@ -1137,6 +1285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], properties: [{
                 type: Input
+            }], initialProperties: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], validityChange: [{
@@ -1471,13 +1621,20 @@ function createDynamicFormStore(options) {
     const initialValues = options.initialValues || {};
     const validateOnBlur = options.validateOnBlur ?? true;
     const validateOnChange = options.validateOnChange ?? false;
+    const validationContext = {
+        t: createMessageResolver(options.messages),
+    };
     const data = signal(applyComputedValues(fields, initialValues), ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    // The baseline `dirty` is measured against: the initialValues option until
+    // reset(newValues) replaces it. Distinct from that option, which never
+    // changes. See the React adapter for the full rationale.
+    const baselineValues = signal({ ...data() }, ...(ngDevMode ? [{ debugName: "baselineValues" }] : /* istanbul ignore next */ []));
     const errors = signal({}, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     const isDirty = signal(false, ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
     const touched = signal({}, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     const isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
     const isSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitted" }] : /* istanbul ignore next */ []));
-    const validationResult = signal(validateFields(fields, data()), ...(ngDevMode ? [{ debugName: "validationResult" }] : /* istanbul ignore next */ []));
+    const validationResult = signal(validateFields(fields, data(), undefined, validationContext), ...(ngDevMode ? [{ debugName: "validationResult" }] : /* istanbul ignore next */ []));
     const isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : /* istanbul ignore next */ []));
     let validationRun = 0;
     let validationController;
@@ -1493,7 +1650,7 @@ function createDynamicFormStore(options) {
         return res.valid;
     }
     function validate() {
-        const res = validateFields(fields, data());
+        const res = validateFields(fields, data(), undefined, validationContext);
         errors.set(res.errors);
         return commitSyncResult(res);
     }
@@ -1506,6 +1663,7 @@ function createDynamicFormStore(options) {
         isValidating.set(true);
         try {
             const res = await validateFieldsAsync(fields, snapshot, snapshot, {
+                ...validationContext,
                 signal: controller.signal,
             });
             if (run !== validationRun || data() !== snapshot) {
@@ -1528,7 +1686,7 @@ function createDynamicFormStore(options) {
         validationController?.abort();
         validationRun += 1;
         isValidating.set(false);
-        const res = validateFields(fields, next);
+        const res = validateFields(fields, next, undefined, validationContext);
         commitSyncResult(res);
         if (validateOnChange) {
             errors.set(res.errors);
@@ -1549,13 +1707,24 @@ function createDynamicFormStore(options) {
         touched.set(Object.fromEntries(collectFieldPaths(fields, data()).map((path) => [path, true])));
     }
     /** Clears the touched map without touching data, errors or dirty state. */
+    function getDirtyValues() {
+        const baseline = baselineValues();
+        const current = data();
+        const dirty = {};
+        for (const key of Object.keys(current)) {
+            if (!Object.is(current[key], baseline[key])) {
+                dirty[key] = current[key];
+            }
+        }
+        return dirty;
+    }
     function resetTouched() {
         touched.set({});
     }
     function handleBlur(fieldName) {
         setFieldTouched(fieldName, true);
         if (validateOnBlur) {
-            const res = validateFields(fields, data());
+            const res = validateFields(fields, data(), undefined, validationContext);
             errors.set(res.errors);
             commitSyncResult(res);
         }
@@ -1564,6 +1733,7 @@ function createDynamicFormStore(options) {
         const seed = newValues ?? initialValues;
         const next = applyComputedValues(fields, seed);
         data.set(next);
+        baselineValues.set({ ...next });
         errors.set({});
         isDirty.set(false);
         touched.set({});
@@ -1572,7 +1742,7 @@ function createDynamicFormStore(options) {
         validationController?.abort();
         validationRun += 1;
         isValidating.set(false);
-        commitSyncResult(validateFields(fields, next));
+        commitSyncResult(validateFields(fields, next, undefined, validationContext));
     }
     /**
      * Returns a submit handler, mirroring the React and Vue `useDynamicForm`
@@ -1602,6 +1772,7 @@ function createDynamicFormStore(options) {
                 const snapshot = data();
                 isValidating.set(true);
                 const res = await validateFieldsAsync(fields, snapshot, snapshot, {
+                    ...validationContext,
                     signal: controller.signal,
                 });
                 if (thisSubmit !== submitRun) {
@@ -1616,7 +1787,7 @@ function createDynamicFormStore(options) {
                     validationResult.set(res);
                 }
                 else {
-                    const live = validateFields(fields, data());
+                    const live = validateFields(fields, data(), undefined, validationContext);
                     errors.set(live.errors);
                     validationResult.set(live);
                 }
@@ -1644,6 +1815,8 @@ function createDynamicFormStore(options) {
         isValidationComplete,
         validationStatus,
         isDirty,
+        baselineValues,
+        getDirtyValues,
         touched,
         isSubmitting,
         isSubmitted,

package/dist/types/dynamic-field-kit-angular.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { OnChanges, ChangeDetectorRef, EventEmitter, SimpleChanges, AfterViewInit, OnDestroy, ViewContainerRef, OnInit, TemplateRef, Type, InjectionToken } from '@angular/core';
-import { FieldTypeKey, Properties, FieldDescription, ResolvedFieldRendererProps, BaseLayout, ResponsiveLayout, ValidationResult, LayoutConfig, FieldRegistry } from '@dynamic-field-kit/core';
-export { ColumnLayoutConfig, FieldDescription, FieldRegistry, FieldRendererProps, FieldTypeKey, GridLayoutConfig, LayoutConfig, RowLayoutConfig, ValidationContext, ValidationResult, collectFieldPaths, fieldRegistry, indexGroupPathMap, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
+import { OptionsStatus, FieldTypeKey, Properties, FieldDescription, ResolvedFieldRendererProps, BaseLayout, ResponsiveLayout, ValidationResult, LayoutConfig, MessageCatalog, FieldRegistry } from '@dynamic-field-kit/core';
+export { ColumnLayoutConfig, FIELD_RENDERER_PROP_KEYS, FieldDescription, FieldRegistry, FieldRendererProps, FieldTypeKey, GridLayoutConfig, LayoutConfig, RowLayoutConfig, ValidationContext, ValidationResult, buildFieldRendererProps, collectFieldPaths, fieldRegistry, indexGroupPathMap, makeErrorId, makeFieldId, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
 import * as i1 from '@angular/common';
 
 interface FieldInputProps {
@@ -15,6 +15,9 @@ interface FieldInputProps {
     dirty?: boolean;
     error?: string | string[];
     options?: unknown[];
+    optionsStatus?: OptionsStatus;
+    optionsError?: unknown;
+    onOptionsQuery?: (query: string) => void;
     className?: string;
     description?: string;
     id?: string;
@@ -45,6 +48,10 @@ declare abstract class BaseInputComponent implements OnChanges {
     dirty?: boolean;
     error?: string | string[];
     options?: unknown[];
+    optionsStatus?: OptionsStatus;
+    optionsError?: unknown;
+    /** Renderer-driven refetch for a search-remote field. */
+    onOptionsQuery?: (query: string) => void;
     className?: string;
     description?: string;
     id?: string;
@@ -62,7 +69,7 @@ declare abstract class BaseInputComponent implements OnChanges {
     protected detectChanges(): void;
     protected hasChanges(changes: SimpleChanges, prop: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BaseInputComponent, "ng-component", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "className": { "alias": "className"; "required": false; }; "description": { "alias": "description"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaInvalid": { "alias": "ariaInvalid"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BaseInputComponent, "ng-component", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsStatus": { "alias": "optionsStatus"; "required": false; }; "optionsError": { "alias": "optionsError"; "required": false; }; "onOptionsQuery": { "alias": "onOptionsQuery"; "required": false; }; "className": { "alias": "className"; "required": false; }; "description": { "alias": "description"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaInvalid": { "alias": "ariaInvalid"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
@@ -83,22 +90,58 @@ declare class DynamicInput extends BaseInputComponent implements OnChanges, Afte
     private cleanup;
     private cleanupSubscriptions;
     private cleanupRenderedComponent;
+    /** The id `ariaDescribedBy` points at. See core's `makeErrorId`. */
+    errorNodeId(): string;
+    /** `error` may arrive as a bare string, so index 0 would be a character. */
+    firstError(): string | undefined;
+    /**
+     * Whether the adapter should render the validation message itself.
+     *
+     * Asks the registry directly rather than reading a flag set by `render()`:
+     * `render()` runs in `ngAfterViewInit`, by which point this template's
+     * bindings have already been checked for the pass, and under `OnPush`
+     * nothing would mark them dirty again. A registered renderer owns its own
+     * error presentation, so only the built-in fallback gets a message here.
+     */
+    showDefaultError(): boolean;
     private render;
     private isComponentType;
     private renderComponent;
     private renderFallback;
     private getFallbackProps;
     private applyProps;
+    /**
+     * Props that are callbacks rather than resolved values, so they are not in
+     * `KNOWN_PROPS` / `FIELD_RENDERER_PROP_KEYS` and the loop above never sees
+     * them. Without this a renderer declaring `onOptionsQuery` always got
+     * `undefined` and could never trigger a search-remote refetch.
+     */
+    private applyCallbackProps;
     private applyExtraProps;
     private bindOutputs;
     private emitValue;
+    /**
+     * Puts the aria flags on whatever control the HTML5 fallback just built.
+     *
+     * Applied here, once, rather than in each of the fallback's branches: they
+     * hand-build an input, textarea, checkbox or select, and every one of them
+     * would otherwise need the same four lines. Without this the fallback emits
+     * the `{id}-error` node with nothing pointing at it, and
+     * `focusFirstInvalidField` - which selects `[aria-invalid="true"]` - still
+     * finds nothing on this adapter.
+     *
+     * `render()` re-runs on every ngOnChanges while the fallback is in use (there
+     * is no component instance to sync props into), so this stays current as the
+     * field's error comes and goes.
+     */
+    private applyFallbackAria;
     private renderDefaultFallbackHTML5;
     private renderError;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; "extraProps": { "alias": "extraProps"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;
 }
 
-declare class FieldInput implements OnChanges {
+declare class FieldInput implements OnChanges, OnDestroy {
     private cdr;
     fieldDescription?: FieldDescription;
     /**
@@ -141,7 +184,13 @@ declare class FieldInput implements OnChanges {
      */
     rendererProps: ResolvedFieldRendererProps | null;
     constructor(cdr: ChangeDetectorRef);
+    private loader?;
+    private optionsState?;
+    /** Bound into the template so a renderer can drive a search-remote refetch. */
+    onOptionsQuery: (query: string) => void;
     ngOnChanges(_changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private syncOptionsLoader;
     private buildProps;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": { "alias": "fieldDescription"; "required": false; }; "data": { "alias": "data"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; "validationControlled": { "alias": "validationControlled"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "idPrefix": { "alias": "idPrefix"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; "onBlurField": "onBlurField"; }, never, never, true, never>;
@@ -154,6 +203,13 @@ declare class MultiFieldInput implements OnInit, OnChanges {
     private cdr;
     fieldDescriptions: FieldDescription[];
     properties?: Properties;
+    /**
+     * The values per-field `dirty` is measured against. Defaults to the first
+     * non-`undefined` `properties` this component sees. This adapter has no
+     * `form` shorthand, so pass `store.baselineValues()` here to keep `dirty`
+     * correct across `store.reset(newValues)`.
+     */
+    initialProperties?: Properties;
     onChange: EventEmitter<Properties>;
     validityChange: EventEmitter<ValidationResult>;
     /**
@@ -185,7 +241,7 @@ declare class MultiFieldInput implements OnInit, OnChanges {
     idPrefix?: string;
     private touchedFields;
     private readonly instanceId;
-    private initialProperties;
+    private firstSeenProperties;
     private indexedErrorsSource?;
     private indexedErrors;
     private indexedTouchedSource?;
@@ -242,7 +298,7 @@ declare class MultiFieldInput implements OnInit, OnChanges {
     onGroupItemChange(field: FieldDescription, index: number, next: Properties): void;
     private commitData;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "idPrefix": { "alias": "idPrefix"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; "onBlurField": "onBlurField"; "touchedChange": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "initialProperties": { "alias": "initialProperties"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "idPrefix": { "alias": "idPrefix"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; "onBlurField": "onBlurField"; "touchedChange": "touchedChange"; }, never, never, true, never>;
 }
 
 declare class DynamicFormDevToolsComponent {
@@ -265,6 +321,13 @@ interface DynamicFormOptions {
     initialValues?: Properties;
     validateOnBlur?: boolean;
     validateOnChange?: boolean;
+    /**
+     * Messages for the built-in validators, set once for the whole form instead
+     * of per field. A message passed directly to a validator still wins, and any
+     * key omitted here falls back to the validator's English default. See core's
+     * `MessageCatalog`.
+     */
+    messages?: MessageCatalog;
 }
 declare function createDynamicFormStore(options: DynamicFormOptions): {
     data: i0.WritableSignal<Properties>;
@@ -274,6 +337,8 @@ declare function createDynamicFormStore(options: DynamicFormOptions): {
     isValidationComplete: i0.Signal<boolean>;
     validationStatus: i0.Signal<"invalid" | "valid" | "pending">;
     isDirty: i0.WritableSignal<boolean>;
+    baselineValues: i0.WritableSignal<Properties>;
+    getDirtyValues: () => Properties;
     touched: i0.WritableSignal<Record<string, boolean>>;
     isSubmitting: i0.WritableSignal<boolean>;
     isSubmitted: i0.WritableSignal<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-field-kit/angular",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Angular renderer for dynamic-field-kit",
   "license": "MIT",
   "private": false,
@@ -54,7 +54,7 @@
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
-    "@dynamic-field-kit/core": "^1.6.0",
+    "@dynamic-field-kit/core": "^1.7.0",
     "@vitest/coverage-istanbul": "^4.1.11",
     "jsdom": "^29.1.1",
     "ng-packagr": "^21.2.0",