@dynamic-field-kit/angular 1.5.1 → 1.7.0

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, applyComputedValues, validateFields, resolveOptions, resolveDisabled, resolveReadOnly, validateField, canAddGroupItem, canRemoveGroupItem, createGroupItem } from '@dynamic-field-kit/core';
-export { FieldRegistry, fieldRegistry, 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;
@@ -13,10 +13,31 @@ class BaseInputComponent {
     required;
     disabled;
     readOnly;
+    /**
+     * Whether the field has been blurred (or marked touched by the form store).
+     * Renderers gate error display on this to avoid shouting at a user who has
+     * not reached the field yet.
+     */
+    touched;
+    /** Whether the value differs from the one the form opened with. */
+    dirty;
     error;
     options;
+    optionsStatus;
+    optionsError;
+    /** Renderer-driven refetch for a search-remote field. */
+    onOptionsQuery;
     className;
     description;
+    id;
+    ariaInvalid;
+    ariaDescribedBy;
+    ariaRequired;
+    min;
+    max;
+    step;
+    accept;
+    multiple;
     valueChange = new EventEmitter();
     constructor(cdr) {
         this.cdr = cdr;
@@ -30,10 +51,10 @@ class BaseInputComponent {
     hasChanges(changes, prop) {
         return changes[prop] !== undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", readOnly: "readOnly", error: "error", options: "options", className: "className", description: "description" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    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", 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: "19.2.25", ngImport: i0, type: BaseInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -50,14 +71,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], readOnly: [{
                 type: Input
+            }], touched: [{
+                type: Input
+            }], dirty: [{
+                type: Input
             }], error: [{
                 type: Input
             }], options: [{
                 type: Input
+            }], optionsStatus: [{
+                type: Input
+            }], optionsError: [{
+                type: Input
+            }], onOptionsQuery: [{
+                type: Input
             }], className: [{
                 type: Input
             }], description: [{
                 type: Input
+            }], id: [{
+                type: Input
+            }], ariaInvalid: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], ariaRequired: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], multiple: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -74,6 +123,10 @@ const FIELD_REGISTRY = new InjectionToken('dfk.FieldRegistry', {
 
 // Only the framework-agnostic FieldRendererProps keys. Domain-specific props
 // reach the renderer through `extraProps` (FieldDescription.props) instead.
+// Must stay in step with core's FIELD_RENDERER_PROP_KEYS - a key missing here
+// is a key no Angular renderer can ever receive, which is how `touched`,
+// `dirty`, `id` and the aria flags used to be unreachable on this adapter
+// alone. `packages/core/test/adapterParity.test.ts` asserts the two lists match.
 const KNOWN_PROPS = [
     'value',
     'label',
@@ -81,10 +134,23 @@ const KNOWN_PROPS = [
     'required',
     'disabled',
     'readOnly',
+    'touched',
+    'dirty',
     'error',
     'options',
+    'optionsStatus',
+    'optionsError',
     'className',
     'description',
+    'id',
+    'ariaInvalid',
+    'ariaDescribedBy',
+    'ariaRequired',
+    'min',
+    'max',
+    'step',
+    'accept',
+    'multiple',
 ];
 class DynamicInput extends BaseInputComponent {
     type;
@@ -132,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);
         }
@@ -150,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}`);
@@ -219,15 +309,27 @@ 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,
             disabled: this.disabled ?? false,
             readOnly: this.readOnly ?? false,
+            touched: this.touched ?? false,
+            dirty: this.dirty ?? false,
             error: this.error,
             options: this.options ?? [],
             className: this.className ?? '',
             description: this.description ?? '',
+            id: this.id ?? '',
+            ariaInvalid: this.ariaInvalid ?? false,
+            ariaDescribedBy: this.ariaDescribedBy,
+            ariaRequired: this.ariaRequired ?? false,
+            min: this.min,
+            max: this.max,
+            step: this.step,
+            accept: this.accept,
+            multiple: this.multiple ?? false,
         };
     }
     // Gates on `this.supplied` (populated from SimpleChanges in ngOnChanges),
@@ -255,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;
@@ -283,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' ||
@@ -291,6 +436,9 @@ class DynamicInput extends BaseInputComponent {
             type === 'number') {
             const input = document.createElement('input');
             input.type = type;
+            if (this.id) {
+                input.id = this.id;
+            }
             if (this.className) {
                 input.className = this.className;
             }
@@ -317,6 +465,9 @@ class DynamicInput extends BaseInputComponent {
         }
         if (type === 'textarea') {
             const textarea = document.createElement('textarea');
+            if (this.id) {
+                textarea.id = this.id;
+            }
             if (this.className) {
                 textarea.className = this.className;
             }
@@ -342,6 +493,9 @@ class DynamicInput extends BaseInputComponent {
         if (type === 'checkbox') {
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
+            if (this.id) {
+                checkbox.id = this.id;
+            }
             if (this.className) {
                 checkbox.className = this.className;
             }
@@ -360,6 +514,9 @@ class DynamicInput extends BaseInputComponent {
         }
         if (type === 'select') {
             const select = document.createElement('select');
+            if (this.id) {
+                select.id = this.id;
+            }
             if (this.className) {
                 select.className = this.className;
             }
@@ -401,17 +558,35 @@ class DynamicInput extends BaseInputComponent {
         el.style.color = 'red';
         this.host.element.nativeElement.appendChild(el);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 ɵ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>
+    <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: "19.2.25", ngImport: i0, type: DynamicInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-dynamic-input',
                     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
@@ -429,11 +604,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 class FieldInput {
     cdr;
     fieldDescription;
+    /**
+     * Data at this field's own level. Preferred over `value`: the shared
+     * `buildFieldRendererProps` needs the surrounding data to resolve
+     * `appearCondition`, dynamic options and cross-field validation. When only
+     * `value` is bound (mounting this component directly), a one-key object is
+     * synthesised from it.
+     */
+    data;
+    /** Top-level form data, for fields nested inside a repeatable group. */
+    rootData;
     value;
     options;
     disabled;
     readOnly;
     error;
+    /** Distinguishes a controlled empty error from an omitted error input. */
+    validationControlled = false;
+    /** Whether the field has been blurred, or marked touched by a form store. */
+    touched;
+    /** Whether the value differs from the one the form opened with. */
+    dirty;
+    /** Per-form-instance id namespace; see core's `makeFieldId`. */
+    idPrefix = 'dfk-field';
     onValueChangeField = new EventEmitter();
     /**
      * Emits this field's name when focus leaves it. Driven by `focusout`, which
@@ -441,50 +634,121 @@ class FieldInput {
      * declare a blur output of its own.
      */
     onBlurField = new EventEmitter();
-    shouldRender = false;
-    get resolvedOptions() {
-        if (this.options) {
-            return this.options;
-        }
-        if (!this.fieldDescription?.options) {
-            return undefined;
-        }
-        if (typeof this.fieldDescription.options === 'function') {
-            return undefined;
-        }
-        return this.fieldDescription.options;
-    }
+    /**
+     * The full renderer prop bag, built once per change-detection pass rather
+     * than from one getter per binding - `buildFieldRendererProps` validates the
+     * field, and running that ~20 times per pass would be wasteful.
+     */
+    rendererProps = null;
     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.shouldRender = !!this.fieldDescription;
+        this.syncOptionsLoader();
+        this.rendererProps = this.buildProps();
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FieldInput, isStandalone: true, selector: "dfk-field-input", inputs: { fieldDescription: "fieldDescription", value: "value", options: "options", disabled: "disabled", readOnly: "readOnly", error: "error" }, outputs: { onValueChangeField: "onValueChangeField", onBlurField: "onBlurField" }, usesOnChanges: true, ngImport: i0, template: `
+    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) {
+            return null;
+        }
+        const data = this.data ?? { [field.name]: this.value };
+        const base = buildFieldRendererProps({
+            fieldDescription: field,
+            data,
+            rootData: this.rootData,
+            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.
+        const error = this.validationControlled
+            ? this.error
+            : (this.error ?? base.error);
+        return {
+            ...base,
+            options: this.options ?? base.options,
+            disabled: this.disabled ?? base.disabled,
+            readOnly: this.readOnly ?? base.readOnly,
+            error,
+            ariaInvalid: Boolean(error),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: FieldInput, isStandalone: true, selector: "dfk-field-input", inputs: { fieldDescription: "fieldDescription", data: "data", rootData: "rootData", value: "value", options: "options", disabled: "disabled", readOnly: "readOnly", error: "error", validationControlled: "validationControlled", touched: "touched", dirty: "dirty", idPrefix: "idPrefix" }, outputs: { onValueChangeField: "onValueChangeField", onBlurField: "onBlurField" }, usesOnChanges: true, ngImport: i0, template: `
     <dfk-dynamic-input
-      *ngIf="shouldRender"
-      [type]="fieldDescription!.type"
-      [value]="value"
-      [label]="fieldDescription!.label"
-      [placeholder]="fieldDescription!.placeholder"
-      [required]="fieldDescription!.required"
-      [description]="$any(fieldDescription!.description)"
-      [options]="resolvedOptions"
-      [className]="fieldDescription!.className"
+      *ngIf="rendererProps as p"
+      [type]="p.type"
+      [value]="p.value"
+      [label]="p.label"
+      [placeholder]="p.placeholder"
+      [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"
+      [touched]="p.touched"
+      [dirty]="p.dirty"
+      [error]="$any(p.error)"
+      [id]="p.id"
+      [ariaInvalid]="p.ariaInvalid"
+      [ariaDescribedBy]="p.ariaDescribedBy"
+      [ariaRequired]="p.ariaRequired"
+      [min]="p.min"
+      [max]="p.max"
+      [step]="p.step"
+      [accept]="p.accept"
+      [multiple]="p.multiple"
       (valueChange)="
         onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
       "
       (focusout)="onBlurField.emit(fieldDescription!.name)"
-      [disabled]="disabled"
-      [readOnly]="readOnly"
-      [error]="$any(error)"
-      [extraProps]="fieldDescription!.props"
+      [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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FieldInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-field-input',
@@ -493,28 +757,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <dfk-dynamic-input
-      *ngIf="shouldRender"
-      [type]="fieldDescription!.type"
-      [value]="value"
-      [label]="fieldDescription!.label"
-      [placeholder]="fieldDescription!.placeholder"
-      [required]="fieldDescription!.required"
-      [description]="$any(fieldDescription!.description)"
-      [options]="resolvedOptions"
-      [className]="fieldDescription!.className"
+      *ngIf="rendererProps as p"
+      [type]="p.type"
+      [value]="p.value"
+      [label]="p.label"
+      [placeholder]="p.placeholder"
+      [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"
+      [touched]="p.touched"
+      [dirty]="p.dirty"
+      [error]="$any(p.error)"
+      [id]="p.id"
+      [ariaInvalid]="p.ariaInvalid"
+      [ariaDescribedBy]="p.ariaDescribedBy"
+      [ariaRequired]="p.ariaRequired"
+      [min]="p.min"
+      [max]="p.max"
+      [step]="p.step"
+      [accept]="p.accept"
+      [multiple]="p.multiple"
       (valueChange)="
         onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
       "
       (focusout)="onBlurField.emit(fieldDescription!.name)"
-      [disabled]="disabled"
-      [readOnly]="readOnly"
-      [error]="$any(error)"
-      [extraProps]="fieldDescription!.props"
+      [extraProps]="p.extraProps"
+      [onOptionsQuery]="onOptionsQuery"
     ></dfk-dynamic-input>
   `,
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { fieldDescription: [{
                 type: Input
+            }], data: [{
+                type: Input
+            }], rootData: [{
+                type: Input
             }], value: [{
                 type: Input
             }], options: [{
@@ -525,6 +807,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], error: [{
                 type: Input
+            }], validationControlled: [{
+                type: Input
+            }], touched: [{
+                type: Input
+            }], dirty: [{
+                type: Input
+            }], idPrefix: [{
+                type: Input
             }], onValueChangeField: [{
                 type: Output
             }], onBlurField: [{
@@ -532,10 +822,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }] } });
 
 const DEFAULT_BREAKPOINT = 768;
+// Per-instance id counter, so two forms rendering the same field name emit
+// different DOM ids.
+/**
+ * Shared empty maps. A fresh object literal in a template binding is a new
+ * identity on every change detection pass, which defeats the per-item caching
+ * below and trips dev-mode checkNoChanges (NG0100).
+ */
+const EMPTY_ERRORS = Object.freeze({});
+const EMPTY_TOUCHED = Object.freeze({});
+let instanceCounter = 0;
+function nextInstanceId() {
+    instanceCounter += 1;
+    return instanceCounter;
+}
 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();
     /**
@@ -545,14 +856,113 @@ class MultiFieldInput {
      * `validateOnBlur` behaviour.
      */
     onBlurField = new EventEmitter();
+    /**
+     * Controlled touched map. When bound it is the single source of truth and
+     * the internal tracker is bypassed, so `createDynamicFormStore`'s `touched`
+     * signal (updated by setFieldTouched/touchAll/handleSubmit, cleared by
+     * reset) is what renderers actually see. Leave it unbound to keep the
+     * internal, blur-only tracker.
+     */
+    touched;
+    /** Controlled error map; bind the form store's `errors()` signal here. */
+    errors;
+    /** Emits the next touched map whenever a field is blurred. */
+    touchedChange = new EventEmitter();
+    /**
+     * Namespace for generated field ids: a field renders with
+     * `${idPrefix}-${name}`. Defaults to a value unique to this component
+     * instance, so two forms containing the same field name do not emit
+     * duplicate DOM ids. Bind a fixed string to pin ids (`idPrefix="dfk-field"`
+     * restores the pre-1.6 ids), or set `FieldDescription.id` per field.
+     */
+    idPrefix;
     touchedFields = {};
+    // Unique per component instance. Angular has no useId equivalent, and this
+    // component is client-rendered by the time ids matter, so a module counter
+    // is enough.
+    instanceId = nextInstanceId();
+    firstSeenProperties = {};
+    indexedErrorsSource;
+    indexedErrors = new Map();
+    indexedTouchedSource;
+    indexedTouched = new Map();
+    get effectiveIdPrefix() {
+        return this.idPrefix ?? `dfk-${this.instanceId}`;
+    }
+    /** The touched map in effect: the controlled input, else the internal one. */
+    get effectiveTouched() {
+        return this.touched ?? this.touchedFields;
+    }
     handleBlurField(fieldName) {
-        this.touchedFields = { ...this.touchedFields, [fieldName]: true };
+        if (this.touched === undefined) {
+            this.touchedFields = { ...this.touchedFields, [fieldName]: true };
+        }
+        this.touchedChange.emit({ ...this.effectiveTouched, [fieldName]: true });
         this.onBlurField.emit(fieldName);
+        this.cdr.markForCheck();
     }
     /** Whether this field has been blurred at least once. */
     isTouched(fieldName) {
-        return Boolean(this.touchedFields[fieldName]);
+        return Boolean(this.effectiveTouched[fieldName]);
+    }
+    /** Whether this field's value differs from the one the form opened with. */
+    isFieldDirty(fieldName) {
+        const baseline = this.initialProperties ?? this.firstSeenProperties;
+        return !Object.is(this.data[fieldName], baseline[fieldName]);
+    }
+    fieldErrors(fieldName) {
+        return this.errors?.[fieldName];
+    }
+    errorsForItem(fieldName, index) {
+        if (this.indexedErrorsSource !== this.errors) {
+            this.indexedErrorsSource = this.errors;
+            this.indexedErrors.clear();
+        }
+        if (!this.indexedErrors.has(fieldName)) {
+            this.indexedErrors.set(fieldName, indexGroupPathMap(this.errors, fieldName));
+        }
+        // An item with no errors still gets a map when the parent has one, so a
+        // nested input is never handed `undefined` for a controlled error map.
+        return this.errors === undefined
+            ? undefined
+            : (this.indexedErrors.get(fieldName)?.[index] ?? EMPTY_ERRORS);
+    }
+    touchedForItem(fieldName, index) {
+        const current = this.effectiveTouched;
+        if (this.indexedTouchedSource !== current) {
+            this.indexedTouchedSource = current;
+            this.indexedTouched.clear();
+        }
+        if (!this.indexedTouched.has(fieldName)) {
+            this.indexedTouched.set(fieldName, indexGroupPathMap(current, fieldName));
+        }
+        // A fresh {} here would be a new binding identity on every change
+        // detection pass, re-running the nested input's ngOnChanges each time and
+        // risking NG0100 in dev mode.
+        return this.indexedTouched.get(fieldName)?.[index] ?? EMPTY_TOUCHED;
+    }
+    handleGroupBlur(fieldName, index, key) {
+        this.handleBlurField(`${fieldName}[${index}].${key}`);
+    }
+    /**
+     * Clears the internally tracked touched state. Only meaningful in
+     * uncontrolled mode - when `touched` is bound, resetting the form store
+     * (e.g. `createDynamicFormStore().reset()`) already clears it.
+     */
+    resetTouched() {
+        this.touchedFields = {};
+        this.touchedChange.emit(this.effectiveTouched);
+        this.cdr.markForCheck();
+    }
+    setFieldTouched(fieldName, isTouched = true) {
+        if (this.touched === undefined) {
+            this.touchedFields = { ...this.touchedFields, [fieldName]: isTouched };
+        }
+        this.touchedChange.emit({
+            ...this.effectiveTouched,
+            [fieldName]: isTouched,
+        });
+        this.cdr.markForCheck();
     }
     layout = 'column';
     // Top-level form data, threaded down through repeatable groups so a nested
@@ -561,6 +971,7 @@ class MultiFieldInput {
     rootData;
     data = {};
     visibleFields = [];
+    initialised = false;
     isMobile = false;
     constructor(cdr) {
         this.cdr = cdr;
@@ -637,6 +1048,12 @@ class MultiFieldInput {
     init() {
         if (this.properties) {
             this.data = applyComputedValues(this.fieldDescriptions, { ...this.properties }, this.rootData);
+            // Baseline for the `dirty` flag: the values the form opened with, not
+            // whatever `properties` happens to hold after later edits.
+            if (!this.initialised) {
+                this.firstSeenProperties = { ...this.properties };
+                this.initialised = true;
+            }
         }
         this.updateVisibleFields();
         this.validityChange.emit(validateFields(this.fieldDescriptions, this.data, this.rootData));
@@ -652,22 +1069,11 @@ class MultiFieldInput {
         const value = this.data[field.name];
         return Array.isArray(value) ? value : [];
     }
-    getResolvedOptions(field) {
-        return resolveOptions(field, this.data, this.rootData);
-    }
-    getDisabled(field) {
-        return resolveDisabled(field, this.data, this.rootData);
-    }
-    getReadOnly(field) {
-        return resolveReadOnly(field, this.data, this.rootData);
-    }
-    getError(field) {
-        if (this.getDisabled(field)) {
-            return undefined;
-        }
-        const errors = validateField(field, this.data[field.name], this.data, this.rootData);
-        return errors.length > 0 ? errors : undefined;
-    }
+    // The per-field getResolvedOptions/getDisabled/getReadOnly/getError helpers
+    // that used to live here are gone: FieldInput now resolves all of it through
+    // core's shared buildFieldRendererProps. Keeping a second copy of that logic
+    // beside the shared one is exactly how the adapters drifted apart in the
+    // first place.
     canAddItem(field) {
         return canAddGroupItem(field, this.getItems(field));
     }
@@ -703,8 +1109,8 @@ class MultiFieldInput {
         this.validityChange.emit(validateFields(this.fieldDescriptions, this.data, this.rootData));
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiFieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: MultiFieldInput, isStandalone: true, selector: "dfk-multi-field-input", inputs: { fieldDescriptions: "fieldDescriptions", properties: "properties", layout: "layout", rootData: "rootData" }, outputs: { onChange: "onChange", validityChange: "validityChange", onBlurField: "onBlurField" }, host: { listeners: { "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0, template: `
+    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", 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]="{
@@ -721,11 +1127,13 @@ class MultiFieldInput {
         <dfk-field-input
           *ngIf="!field.fields"
           [fieldDescription]="field"
-          [value]="data[field.name]"
-          [options]="getResolvedOptions(field)"
-          [disabled]="getDisabled(field)"
-          [readOnly]="getReadOnly(field)"
-          [error]="getError(field)"
+          [data]="data"
+          [rootData]="rootData"
+          [idPrefix]="effectiveIdPrefix"
+          [touched]="isTouched(field.name)"
+          [dirty]="isFieldDirty(field.name)"
+          [error]="fieldErrors(field.name)"
+          [validationControlled]="errors !== undefined"
           (onValueChangeField)="onFieldChange($event)"
           (onBlurField)="handleBlurField($event)"
         ></dfk-field-input>
@@ -745,6 +1153,9 @@ class MultiFieldInput {
                 [fieldDescriptions]="field.fields"
                 [properties]="item"
                 [rootData]="rootData ?? data"
+                [errors]="errorsForItem(field.name, i)"
+                [touched]="touchedForItem(field.name, i)"
+                (onBlurField)="handleGroupBlur(field.name, i, $event)"
                 (onChange)="onGroupItemChange(field, i, $event)"
               ></dfk-multi-field-input>
             </div>
@@ -776,9 +1187,9 @@ class MultiFieldInput {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: MultiFieldInput, selector: "dfk-multi-field-input", inputs: ["fieldDescriptions", "properties", "layout", "rootData"], outputs: ["onChange", "validityChange", "onBlurField"] }, { 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", "value", "options", "disabled", "readOnly", "error"], 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: "19.2.25", ngImport: i0, type: MultiFieldInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiFieldInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-multi-field-input',
@@ -808,11 +1219,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         <dfk-field-input
           *ngIf="!field.fields"
           [fieldDescription]="field"
-          [value]="data[field.name]"
-          [options]="getResolvedOptions(field)"
-          [disabled]="getDisabled(field)"
-          [readOnly]="getReadOnly(field)"
-          [error]="getError(field)"
+          [data]="data"
+          [rootData]="rootData"
+          [idPrefix]="effectiveIdPrefix"
+          [touched]="isTouched(field.name)"
+          [dirty]="isFieldDirty(field.name)"
+          [error]="fieldErrors(field.name)"
+          [validationControlled]="errors !== undefined"
           (onValueChangeField)="onFieldChange($event)"
           (onBlurField)="handleBlurField($event)"
         ></dfk-field-input>
@@ -832,6 +1245,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 [fieldDescriptions]="field.fields"
                 [properties]="item"
                 [rootData]="rootData ?? data"
+                [errors]="errorsForItem(field.name, i)"
+                [touched]="touchedForItem(field.name, i)"
+                (onBlurField)="handleGroupBlur(field.name, i, $event)"
                 (onChange)="onGroupItemChange(field, i, $event)"
               ></dfk-multi-field-input>
             </div>
@@ -869,12 +1285,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], properties: [{
                 type: Input
+            }], initialProperties: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], validityChange: [{
                 type: Output
             }], onBlurField: [{
                 type: Output
+            }], touched: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], touchedChange: [{
+                type: Output
+            }], idPrefix: [{
+                type: Input
             }], layout: [{
                 type: Input
             }], rootData: [{
@@ -894,16 +1320,16 @@ class DynamicFormDevToolsComponent {
     errorCount() {
         return Object.keys(this.errors || {}).length;
     }
-    isOpen = signal(false);
-    activeTab = signal('data');
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activeTab = signal('data', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     tabs = [
         'data',
         'errors',
         'meta',
         'fields',
     ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormDevToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicFormDevToolsComponent, isStandalone: true, selector: "dfk-dev-tools", inputs: { data: "data", errors: "errors", touched: "touched", isDirty: "isDirty", fields: "fields" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormDevToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DynamicFormDevToolsComponent, isStandalone: true, selector: "dfk-dev-tools", inputs: { data: "data", errors: "errors", touched: "touched", isDirty: "isDirty", fields: "fields" }, ngImport: i0, template: `
     <button
       *ngIf="!isOpen()"
       type="button"
@@ -1037,7 +1463,7 @@ class DynamicFormDevToolsComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormDevToolsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormDevToolsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-dev-tools',
@@ -1195,24 +1621,74 @@ function createDynamicFormStore(options) {
     const initialValues = options.initialValues || {};
     const validateOnBlur = options.validateOnBlur ?? true;
     const validateOnChange = options.validateOnChange ?? false;
-    const data = signal(applyComputedValues(fields, initialValues));
-    const errors = signal({});
-    const isDirty = signal(false);
-    const touched = signal({});
-    const isSubmitting = signal(false);
-    const isSubmitted = signal(false);
-    const isValid = computed(() => Object.keys(errors()).length === 0);
+    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(), undefined, validationContext), ...(ngDevMode ? [{ debugName: "validationResult" }] : /* istanbul ignore next */ []));
+    const isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : /* istanbul ignore next */ []));
+    let validationRun = 0;
+    let validationController;
+    // A submit gets its own run counter and controller. Typing aborts the live
+    // validation run, and a submit must not be collateral damage of that.
+    let submitRun = 0;
+    let submitController;
+    const isValid = computed(() => validationResult().valid, ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+    const isValidationComplete = computed(() => validationResult().complete && !isValidating(), ...(ngDevMode ? [{ debugName: "isValidationComplete" }] : /* istanbul ignore next */ []));
+    const validationStatus = computed(() => isValidating() ? 'pending' : validationResult().status, ...(ngDevMode ? [{ debugName: "validationStatus" }] : /* istanbul ignore next */ []));
+    function commitSyncResult(res) {
+        validationResult.set(res);
+        return res.valid;
+    }
     function validate() {
-        const res = validateFields(fields, data());
+        const res = validateFields(fields, data(), undefined, validationContext);
         errors.set(res.errors);
-        return res.valid;
+        return commitSyncResult(res);
+    }
+    async function validateAsync() {
+        const run = ++validationRun;
+        validationController?.abort();
+        const controller = new AbortController();
+        validationController = controller;
+        const snapshot = data();
+        isValidating.set(true);
+        try {
+            const res = await validateFieldsAsync(fields, snapshot, snapshot, {
+                ...validationContext,
+                signal: controller.signal,
+            });
+            if (run !== validationRun || data() !== snapshot) {
+                return res.valid;
+            }
+            errors.set(res.errors);
+            validationResult.set(res);
+            return res.valid;
+        }
+        finally {
+            if (run === validationRun) {
+                isValidating.set(false);
+            }
+        }
     }
     function handleChange(newData) {
         const next = applyComputedValues(fields, newData);
         data.set(next);
         isDirty.set(true);
+        validationController?.abort();
+        validationRun += 1;
+        isValidating.set(false);
+        const res = validateFields(fields, next, undefined, validationContext);
+        commitSyncResult(res);
         if (validateOnChange) {
-            const res = validateFields(fields, next);
             errors.set(res.errors);
         }
     }
@@ -1222,22 +1698,51 @@ function createDynamicFormStore(options) {
     function setFieldTouched(name, isTouched = true) {
         touched.set({ ...touched(), [name]: isTouched });
     }
+    /**
+     * Marks every field touched at once. `handleSubmit` calls this for you, so
+     * an invalid submit surfaces errors on fields the user never focused - bind
+     * `[touched]` on `<dfk-multi-field-input>` for it to take effect.
+     */
+    function touchAll() {
+        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);
         }
     }
     function reset(newValues) {
         const seed = newValues ?? initialValues;
         const next = applyComputedValues(fields, seed);
         data.set(next);
+        baselineValues.set({ ...next });
         errors.set({});
         isDirty.set(false);
         touched.set({});
         isSubmitting.set(false);
         isSubmitted.set(false);
+        validationController?.abort();
+        validationRun += 1;
+        isValidating.set(false);
+        commitSyncResult(validateFields(fields, next, undefined, validationContext));
     }
     /**
      * Returns a submit handler, mirroring the React and Vue `useDynamicForm`
@@ -1250,18 +1755,54 @@ function createDynamicFormStore(options) {
                 e.preventDefault();
             }
             isSubmitting.set(true);
+            const thisSubmit = ++submitRun;
             try {
-                const res = validateFields(fields, data());
-                errors.set(res.errors);
+                // Touch everything before validating: a submit is the user asserting
+                // the form is finished, so a field they never focused should still
+                // show its error. Without this, submitting an untouched form appears
+                // to do nothing at all.
+                touchAll();
+                const run = ++validationRun;
+                // Cancel any live run so its (older) result cannot land on top of this
+                // one, but validate under a controller of the submit's own.
+                validationController?.abort();
+                submitController?.abort();
+                const controller = new AbortController();
+                submitController = controller;
+                const snapshot = data();
+                isValidating.set(true);
+                const res = await validateFieldsAsync(fields, snapshot, snapshot, {
+                    ...validationContext,
+                    signal: controller.signal,
+                });
+                if (thisSubmit !== submitRun) {
+                    return;
+                }
+                // Editing during the submit does not cancel it - the user submitted
+                // this snapshot and is owed an answer for it. What the form *shows*
+                // still has to describe the data on screen, so when it moved on, the
+                // displayed state is re-derived instead of showing the old pass.
+                if (data() === snapshot && run === validationRun) {
+                    errors.set(res.errors);
+                    validationResult.set(res);
+                }
+                else {
+                    const live = validateFields(fields, data(), undefined, validationContext);
+                    errors.set(live.errors);
+                    validationResult.set(live);
+                }
                 isSubmitted.set(true);
                 if (res.valid) {
-                    await onValid(data());
+                    await onValid(snapshot);
                 }
                 else if (onInvalid) {
                     onInvalid(res.errors);
                 }
             }
             finally {
+                if (thisSubmit === submitRun) {
+                    isValidating.set(false);
+                }
                 isSubmitting.set(false);
             }
         };
@@ -1270,16 +1811,24 @@ function createDynamicFormStore(options) {
         data,
         errors,
         isValid,
+        isValidating,
+        isValidationComplete,
+        validationStatus,
         isDirty,
+        baselineValues,
+        getDirtyValues,
         touched,
         isSubmitting,
         isSubmitted,
         setFieldValue,
         setFieldTouched,
+        touchAll,
+        resetTouched,
         handleChange,
         handleBlur,
         reset,
         validate,
+        validateAsync,
         handleSubmit,
     };
 }
@@ -1304,8 +1853,8 @@ class ColumnLayout {
     get gap() {
         return this.config?.gap ?? 12;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColumnLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ColumnLayout, isStandalone: true, selector: "dfk-column-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColumnLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: ColumnLayout, isStandalone: true, selector: "dfk-column-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
     [style.display]="'flex'"
     [style.flexDirection]="'column'"
     [style.gap]="gap + 'px'"
@@ -1313,7 +1862,7 @@ class ColumnLayout {
     <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColumnLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColumnLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-column-layout',
@@ -1338,8 +1887,8 @@ class RowLayout {
     get gap() {
         return this.config?.gap ?? 12;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RowLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: RowLayout, isStandalone: true, selector: "dfk-row-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RowLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: RowLayout, isStandalone: true, selector: "dfk-row-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
     [style.display]="'flex'"
     [style.flexDirection]="'row'"
     [style.gap]="gap + 'px'"
@@ -1347,7 +1896,7 @@ class RowLayout {
     <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RowLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RowLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-row-layout',
@@ -1375,8 +1924,8 @@ class GridLayout {
     get gap() {
         return this.config?.gap ?? 12;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: GridLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: GridLayout, isStandalone: true, selector: "dfk-grid-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GridLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: GridLayout, isStandalone: true, selector: "dfk-grid-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
     [style.display]="'grid'"
     [style.gridTemplateColumns]="'repeat(' + columns + ', 1fr)'"
     [style.gap]="gap + 'px'"
@@ -1384,7 +1933,7 @@ class GridLayout {
     <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: GridLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GridLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-grid-layout',
@@ -1408,8 +1957,8 @@ layoutRegistry.register('row', RowLayout);
 layoutRegistry.register('grid', GridLayout);
 
 class DynamicFieldKitModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
             DynamicInput,
             FieldInput,
             MultiFieldInput,
@@ -1421,7 +1970,7 @@ class DynamicFieldKitModule {
             ColumnLayout,
             RowLayout,
             GridLayout] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
             DynamicInput,
             FieldInput,
             MultiFieldInput,
@@ -1429,7 +1978,7 @@ class DynamicFieldKitModule {
             RowLayout,
             GridLayout] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldKitModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [