@signaltree/ng-forms 3.0.1 → 4.0.0

package/fesm2022/signaltree-ng-forms.mjs

@@ -1,260 +1,773 @@
 import * as i0 from '@angular/core';
-import { signal, isSignal, computed, EventEmitter, inject, ElementRef, Renderer2, effect, forwardRef, HostListener, Output, Input, Directive } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { signalTree, parsePath } from '@signaltree/core';
-import { Observable } from 'rxjs';
+import { signal, computed, isSignal, inject, DestroyRef, EventEmitter, ElementRef, Renderer2, effect, forwardRef, HostListener, Output, Input, Directive } from '@angular/core';
+import { FormGroup, FormArray, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { signalTree } from '@signaltree/core';
+import { deepClone, parsePath, mergeDeep, matchPath, snapshotsEqual } from '@signaltree/shared';
+import { isObservable, firstValueFrom } from 'rxjs';
 
+class FormValidationError extends Error {
+    errors;
+    asyncErrors;
+    constructor(errors, asyncErrors) {
+        super('Form validation failed');
+        this.errors = errors;
+        this.asyncErrors = asyncErrors;
+        this.name = 'FormValidationError';
+    }
+}
+const SYNC_ERROR_KEY = 'signaltree';
+const ASYNC_ERROR_KEY = 'signaltreeAsync';
 function createFormTree(initialValues, config = {}) {
-    const { validators = {}, asyncValidators = {}, ...treeConfig } = config;
-    const valuesTree = signalTree(initialValues, treeConfig);
+    const { validators: baseValidators = {}, asyncValidators: baseAsyncValidators = {}, destroyRef: providedDestroyRef, fieldConfigs = {}, conditionals = [], persistKey, storage, persistDebounceMs = 100, validationBatchMs = 0, ...treeConfig } = config;
+    const syncValidators = normalizeSyncValidators(baseValidators, fieldConfigs);
+    const asyncValidators = normalizeAsyncValidators(baseAsyncValidators, fieldConfigs);
+    const { values: hydratedInitialValues } = hydrateInitialValues(initialValues, persistKey, storage);
+    const initialSnapshot = deepClone(hydratedInitialValues);
+    const valuesTree = signalTree(hydratedInitialValues, treeConfig);
+    assertTreeNode(valuesTree.state);
     const flattenedState = valuesTree.state;
-    const formSignals = {
-        errors: signal({}),
-        asyncErrors: signal({}),
-        touched: signal({}),
-        asyncValidating: signal({}),
-        dirty: signal(false),
-        valid: signal(true),
-        submitting: signal(false),
-    };
-    const markDirty = () => formSignals.dirty.set(true);
-    const enhanceArray = (arraySignal) => {
-        const enhanced = arraySignal;
-        enhanced.push = (item) => {
-            arraySignal.update((arr) => [...arr, item]);
-            markDirty();
-        };
-        enhanced.removeAt = (index) => {
-            arraySignal.update((arr) => arr.filter((_, i) => i !== index));
-            markDirty();
-        };
-        enhanced.setAt = (index, value) => {
-            arraySignal.update((arr) => arr.map((item, i) => (i === index ? value : item)));
-            markDirty();
-        };
-        enhanced.insertAt = (index, item) => {
-            arraySignal.update((arr) => [
-                ...arr.slice(0, index),
-                item,
-                ...arr.slice(index),
-            ]);
-            markDirty();
-        };
-        enhanced.move = (from, to) => {
-            arraySignal.update((arr) => {
-                const newArr = [...arr];
-                const [item] = newArr.splice(from, 1);
-                if (item !== undefined) {
-                    newArr.splice(to, 0, item);
-                }
-                return newArr;
-            });
-            markDirty();
-        };
-        enhanced.clear = () => {
-            arraySignal.set([]);
-            markDirty();
-        };
-        return enhanced;
-    };
-    const enhanceArraysRecursively = (obj) => {
-        for (const key in obj) {
-            const value = obj[key];
-            if (isSignal(value)) {
-                const signalValue = value();
-                if (Array.isArray(signalValue)) {
-                    obj[key] = enhanceArray(value);
-                }
-            }
-            else if (typeof value === 'object' &&
-                value !== null &&
-                !Array.isArray(value)) {
-                enhanceArraysRecursively(value);
+    enhanceArraysRecursively(flattenedState);
+    const formGroup = createAbstractControl(hydratedInitialValues, '', syncValidators, asyncValidators);
+    const destroyRef = providedDestroyRef ?? tryInjectDestroyRef();
+    const cleanupCallbacks = [];
+    const errors = signal({}, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    const asyncErrors = signal({}, ...(ngDevMode ? [{ debugName: "asyncErrors" }] : []));
+    const touched = signal({}, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    const asyncValidating = signal({}, ...(ngDevMode ? [{ debugName: "asyncValidating" }] : []));
+    const dirty = signal(formGroup.dirty, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    const valid = signal(formGroup.valid && !formGroup.pending, ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    const submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    const refreshRunner = () => {
+        const snapshot = collectControlSnapshot(formGroup);
+        errors.set(snapshot.syncErrors);
+        asyncErrors.set(snapshot.asyncErrors);
+        touched.set(snapshot.touched);
+        asyncValidating.set(snapshot.pending);
+        dirty.set(formGroup.dirty);
+        valid.set(formGroup.valid && !formGroup.pending);
+    };
+    let refreshTimer = null;
+    const refreshAggregates = (immediate = false) => {
+        if (immediate || validationBatchMs <= 0) {
+            if (refreshTimer) {
+                clearTimeout(refreshTimer);
+                refreshTimer = null;
             }
+            refreshRunner();
+            return;
         }
+        if (refreshTimer) {
+            clearTimeout(refreshTimer);
+        }
+        refreshTimer = setTimeout(() => {
+            refreshTimer = null;
+            refreshRunner();
+        }, validationBatchMs);
     };
-    enhanceArraysRecursively(flattenedState);
-    const getNestedValue = (obj, path) => {
-        const keys = parsePath(path);
-        let current = obj;
-        for (const key of keys) {
-            if (current && typeof current === 'object') {
-                current = current[key];
-                if (isSignal(current)) {
-                    current = current();
-                }
-            }
-            else {
-                return undefined;
+    refreshAggregates(true);
+    const persistController = createPersistController(formGroup, persistKey, storage, persistDebounceMs, cleanupCallbacks);
+    persistController.persistImmediately();
+    const fieldErrorKeys = new Set([
+        ...Object.keys(syncValidators),
+        ...Object.keys(asyncValidators),
+    ]);
+    const fieldErrors = {};
+    const fieldAsyncErrors = {};
+    fieldErrorKeys.forEach((fieldPath) => {
+        fieldErrors[fieldPath] = computed(() => errors()[fieldPath]);
+        fieldAsyncErrors[fieldPath] = computed(() => asyncErrors()[fieldPath]);
+    });
+    const fieldConfigLookup = (path) => resolveFieldConfig(fieldConfigs, path);
+    const connectControlRecursive = (control, path) => {
+        if (control instanceof FormGroup) {
+            Object.entries(control.controls).forEach(([key, child]) => {
+                connectControlRecursive(child, joinPath(path, key));
+            });
+            return;
+        }
+        if (control instanceof FormArray) {
+            const arraySignal = getSignalAtPath(flattenedState, path);
+            if (arraySignal) {
+                connectFormArrayAndSignal(control, arraySignal, path, syncValidators, asyncValidators, cleanupCallbacks, connectControlRecursive);
             }
+            control.controls.forEach((child, index) => {
+                connectControlRecursive(child, joinPath(path, String(index)));
+            });
+            return;
+        }
+        const signalAtPath = getSignalAtPath(flattenedState, path);
+        if (signalAtPath) {
+            connectControlAndSignal(control, signalAtPath, cleanupCallbacks, fieldConfigLookup(path));
         }
-        return current;
     };
-    const setNestedValue = (path, value) => {
-        const keys = parsePath(path);
-        let current = flattenedState;
-        for (let i = 0; i < keys.length - 1; i++) {
-            current = current[keys[i]];
-            if (!current)
-                return;
+    connectControlRecursive(formGroup, '');
+    const conditionalState = new Map();
+    const applyConditionals = conditionals.length > 0
+        ? () => {
+            const values = formGroup.getRawValue();
+            conditionals.forEach(({ when, fields }) => {
+                let visible = true;
+                try {
+                    visible = when(values);
+                }
+                catch {
+                    visible = true;
+                }
+                fields.forEach((fieldPath) => {
+                    const control = formGroup.get(fieldPath);
+                    if (!control) {
+                        return;
+                    }
+                    const previous = conditionalState.get(fieldPath);
+                    if (previous === visible) {
+                        return;
+                    }
+                    conditionalState.set(fieldPath, visible);
+                    if (visible) {
+                        control.enable({ emitEvent: false });
+                    }
+                    else {
+                        control.disable({ emitEvent: false });
+                    }
+                });
+            });
+        }
+        : () => undefined;
+    applyConditionals();
+    const aggregateSubscriptions = [];
+    aggregateSubscriptions.push(formGroup.valueChanges.subscribe(() => {
+        refreshAggregates();
+        persistController.schedulePersist();
+        applyConditionals();
+    }));
+    aggregateSubscriptions.push(formGroup.statusChanges.subscribe(() => refreshAggregates()));
+    if (formGroup.events) {
+        aggregateSubscriptions.push(formGroup.events.subscribe(() => refreshAggregates()));
+    }
+    cleanupCallbacks.push(() => {
+        aggregateSubscriptions.forEach((sub) => sub.unsubscribe());
+        if (refreshTimer) {
+            clearTimeout(refreshTimer);
+        }
+    });
+    if (destroyRef) {
+        destroyRef.onDestroy(() => {
+            cleanupCallbacks.splice(0).forEach((fn) => fn());
+        });
+    }
+    const setValue = (field, value) => {
+        const targetSignal = getSignalAtPath(flattenedState, field);
+        const control = formGroup.get(field);
+        if (targetSignal && 'set' in targetSignal) {
+            targetSignal.set(value);
         }
-        const lastKey = keys[keys.length - 1];
-        const target = current[lastKey];
-        if (isSignal(target) && 'set' in target) {
-            target.set(value);
+        else if (control) {
+            control.setValue(value, { emitEvent: true });
         }
+        if (control) {
+            const untypedControl = control;
+            untypedControl.markAsTouched();
+            untypedControl.markAsDirty();
+            untypedControl.updateValueAndValidity({ emitEvent: true });
+        }
+        refreshAggregates(true);
+        persistController.schedulePersist();
+    };
+    const setValues = (values) => {
+        Object.entries(values).forEach(([key, value]) => {
+            setValue(key, value);
+        });
+    };
+    const reset = () => {
+        formGroup.reset(initialSnapshot);
+        submitting.set(false);
+        refreshAggregates(true);
+        persistController.persistImmediately();
+        applyConditionals();
     };
     const validate = async (field) => {
-        const errors = {};
-        const asyncErrors = {};
-        const fieldsToValidate = field ? [field] : Object.keys(validators);
-        for (const fieldPath of fieldsToValidate) {
-            const validator = validators[fieldPath];
-            if (validator) {
-                const value = getNestedValue(flattenedState, fieldPath);
-                const error = validator(value);
-                if (error) {
-                    errors[fieldPath] = error;
-                }
+        if (field) {
+            const control = formGroup.get(field);
+            if (!control) {
+                return;
             }
+            control.markAsTouched();
+            control.updateValueAndValidity({ emitEvent: true });
+            refreshAggregates(true);
+            await waitForPending(control);
+            refreshAggregates(true);
+            return;
         }
-        formSignals.errors.set(errors);
-        const asyncFieldsToValidate = field
-            ? [field]
-            : Object.keys(asyncValidators);
-        for (const fieldPath of asyncFieldsToValidate) {
-            const asyncValidator = asyncValidators[fieldPath];
-            if (asyncValidator && (!field || field === fieldPath)) {
-                formSignals.asyncValidating.update((v) => ({
-                    ...v,
-                    [fieldPath]: true,
-                }));
-                try {
-                    const value = getNestedValue(flattenedState, fieldPath);
-                    const result = asyncValidator(value);
-                    let error;
-                    if (result instanceof Observable) {
-                        error = await new Promise((resolve) => {
-                            result.subscribe({
-                                next: (val) => resolve(val),
-                                error: () => resolve('Validation error'),
-                            });
-                        });
-                    }
-                    else {
-                        error = await result;
-                    }
-                    if (error) {
-                        asyncErrors[fieldPath] = error;
-                    }
-                }
-                catch {
-                    asyncErrors[fieldPath] = 'Validation error';
-                }
-                formSignals.asyncValidating.update((v) => ({
-                    ...v,
-                    [fieldPath]: false,
-                }));
+        formGroup.markAllAsTouched();
+        formGroup.updateValueAndValidity({ emitEvent: true });
+        refreshAggregates(true);
+        await waitForPending(formGroup);
+        refreshAggregates(true);
+    };
+    const submit = async (submitFn) => {
+        submitting.set(true);
+        try {
+            await validate();
+            if (!valid()) {
+                throw new FormValidationError(errors(), asyncErrors());
             }
+            const currentValues = formGroup.getRawValue();
+            const result = await submitFn(currentValues);
+            return result;
+        }
+        finally {
+            submitting.set(false);
+            refreshAggregates(true);
         }
-        formSignals.asyncErrors.set(asyncErrors);
-        const hasErrors = Object.keys(errors).length > 0;
-        const hasAsyncErrors = Object.keys(asyncErrors).length > 0;
-        const isValidating = Object.values(formSignals.asyncValidating()).some((v) => v);
-        formSignals.valid.set(!hasErrors && !hasAsyncErrors && !isValidating);
     };
-    const fieldErrors = {};
-    const fieldAsyncErrors = {};
-    [...Object.keys(validators), ...Object.keys(asyncValidators)].forEach((fieldPath) => {
-        fieldErrors[fieldPath] = computed(() => {
-            const errors = formSignals.errors();
-            return errors[fieldPath];
-        });
-        fieldAsyncErrors[fieldPath] = computed(() => {
-            const errors = formSignals.asyncErrors();
-            return errors[fieldPath];
-        });
-    });
+    const destroy = () => {
+        cleanupCallbacks.splice(0).forEach((fn) => fn());
+    };
     const formTree = {
         state: flattenedState,
         $: flattenedState,
-        ...formSignals,
+        form: formGroup,
+        errors,
+        asyncErrors,
+        touched,
+        asyncValidating,
+        dirty,
+        valid,
+        submitting,
         unwrap: () => valuesTree(),
-        setValue: (field, value) => {
-            setNestedValue(field, value);
-            formSignals.touched.update((t) => ({ ...t, [field]: true }));
-            markDirty();
-            void validate(field);
-        },
-        setValues: (values) => {
-            valuesTree((v) => ({ ...v, ...values }));
-            markDirty();
-            void validate();
-        },
-        reset: () => {
-            const resetSignals = (current, initial) => {
-                for (const [key, initialValue] of Object.entries(initial)) {
-                    const currentValue = current[key];
-                    if (isSignal(currentValue) && 'set' in currentValue) {
-                        currentValue.set(initialValue);
-                    }
-                    else if (typeof initialValue === 'object' &&
-                        initialValue !== null &&
-                        !Array.isArray(initialValue) &&
-                        typeof currentValue === 'object' &&
-                        currentValue !== null &&
-                        !isSignal(currentValue)) {
-                        resetSignals(currentValue, initialValue);
-                    }
-                }
-            };
-            resetSignals(flattenedState, initialValues);
-            formSignals.errors.set({});
-            formSignals.asyncErrors.set({});
-            formSignals.touched.set({});
-            formSignals.asyncValidating.set({});
-            formSignals.dirty.set(false);
-            formSignals.valid.set(true);
-            formSignals.submitting.set(false);
-        },
-        submit: async (submitFn) => {
-            formSignals.submitting.set(true);
-            try {
-                await validate();
-                if (!formSignals.valid()) {
-                    throw new Error('Form is invalid');
-                }
-                const currentValues = valuesTree();
-                const result = await submitFn(currentValues);
-                return result;
-            }
-            finally {
-                formSignals.submitting.set(false);
-            }
-        },
+        setValue,
+        setValues,
+        reset,
+        submit,
         validate,
         getFieldError: (field) => fieldErrors[field] || computed(() => undefined),
         getFieldAsyncError: (field) => fieldAsyncErrors[field] || computed(() => undefined),
-        getFieldTouched: (field) => computed(() => {
-            const touched = formSignals.touched();
-            return touched[field];
-        }),
+        getFieldTouched: (field) => computed(() => formGroup.get(field)?.touched ?? false),
         isFieldValid: (field) => computed(() => {
-            const errors = formSignals.errors();
-            const asyncErrors = formSignals.asyncErrors();
-            const asyncValidating = formSignals.asyncValidating();
-            return !errors[field] && !asyncErrors[field] && !asyncValidating[field];
-        }),
-        isFieldAsyncValidating: (field) => computed(() => {
-            const asyncValidating = formSignals.asyncValidating();
-            return asyncValidating[field];
+            const control = formGroup.get(field);
+            return !!control && control.valid && !control.pending;
         }),
+        isFieldAsyncValidating: (field) => computed(() => !!formGroup.get(field)?.pending),
         fieldErrors,
         fieldAsyncErrors,
         values: valuesTree,
+        destroy,
     };
     return formTree;
 }
+function createVirtualFormArray(items, visibleRange, controlFactory = (value) => new FormControl(value)) {
+    const start = Math.max(0, visibleRange.start);
+    const end = Math.max(start, visibleRange.end);
+    const controls = items
+        .slice(start, end)
+        .map((item, offset) => controlFactory(item, start + offset));
+    return new FormArray(controls);
+}
+function enhanceArraysRecursively(obj, visited = new WeakSet()) {
+    if (visited.has(obj)) {
+        return;
+    }
+    visited.add(obj);
+    for (const key in obj) {
+        const value = obj[key];
+        if (isSignal(value)) {
+            const signalValue = value();
+            if (Array.isArray(signalValue)) {
+                obj[key] = enhanceArray(value);
+            }
+        }
+        else if (typeof value === 'object' &&
+            value !== null &&
+            !Array.isArray(value)) {
+            enhanceArraysRecursively(value, visited);
+        }
+    }
+}
+const enhanceArray = (arraySignal) => {
+    const enhanced = arraySignal;
+    enhanced.push = (item) => {
+        arraySignal.update((arr) => [...arr, item]);
+    };
+    enhanced.removeAt = (index) => {
+        arraySignal.update((arr) => arr.filter((_, i) => i !== index));
+    };
+    enhanced.setAt = (index, value) => {
+        arraySignal.update((arr) => arr.map((item, i) => (i === index ? value : item)));
+    };
+    enhanced.insertAt = (index, item) => {
+        arraySignal.update((arr) => [
+            ...arr.slice(0, index),
+            item,
+            ...arr.slice(index),
+        ]);
+    };
+    enhanced.move = (from, to) => {
+        arraySignal.update((arr) => {
+            const newArr = [...arr];
+            const [item] = newArr.splice(from, 1);
+            if (item !== undefined) {
+                newArr.splice(to, 0, item);
+            }
+            return newArr;
+        });
+    };
+    enhanced.clear = () => {
+        arraySignal.set([]);
+    };
+    return enhanced;
+};
+function getSignalAtPath(node, path) {
+    if (!path) {
+        return null;
+    }
+    const segments = parsePath(path);
+    let current = node;
+    for (const segment of segments) {
+        if (!current || typeof current !== 'object') {
+            return null;
+        }
+        current = current[segment];
+    }
+    if (isSignal(current)) {
+        return current;
+    }
+    return null;
+}
+function joinPath(parent, segment) {
+    return parent ? `${parent}.${segment}` : segment;
+}
+function wrapSyncValidator(validator) {
+    return (control) => {
+        const result = validator(control.value);
+        return result ? { [SYNC_ERROR_KEY]: result } : null;
+    };
+}
+function wrapAsyncValidator(validator) {
+    return async (control) => {
+        try {
+            const maybeAsync = validator(control.value);
+            const resolved = isObservable(maybeAsync)
+                ? await firstValueFrom(maybeAsync)
+                : await maybeAsync;
+            return resolved ? { [ASYNC_ERROR_KEY]: resolved } : null;
+        }
+        catch {
+            return { [ASYNC_ERROR_KEY]: 'Validation error' };
+        }
+    };
+}
+function createAbstractControl(value, path, validators, asyncValidators) {
+    const syncValidator = findValidator(validators, path);
+    const asyncValidator = findValidator(asyncValidators, path);
+    const syncFns = syncValidator
+        ? [wrapSyncValidator(syncValidator)]
+        : undefined;
+    const asyncFns = asyncValidator
+        ? [wrapAsyncValidator(asyncValidator)]
+        : undefined;
+    if (Array.isArray(value)) {
+        const controls = value.map((item, index) => createAbstractControl(item, joinPath(path, String(index)), validators, asyncValidators));
+        return new FormArray(controls, syncFns, asyncFns);
+    }
+    if (isPlainObject(value)) {
+        const controls = {};
+        for (const [key, child] of Object.entries(value)) {
+            controls[key] = createAbstractControl(child, joinPath(path, key), validators, asyncValidators);
+        }
+        return new FormGroup(controls, {
+            validators: syncFns,
+            asyncValidators: asyncFns,
+        });
+    }
+    return new FormControl(value, {
+        validators: syncFns,
+        asyncValidators: asyncFns,
+        nonNullable: false,
+    });
+}
+function connectControlAndSignal(control, valueSignal, cleanupCallbacks, fieldConfig) {
+    let updatingFromControl = false;
+    let updatingFromSignal = false;
+    let versionCounter = 0;
+    let lastControlVersion = 0;
+    let controlDebounceTimer = null;
+    const debounceMs = fieldConfig?.debounceMs ?? 0;
+    const originalSet = valueSignal.set.bind(valueSignal);
+    const originalUpdate = valueSignal.update.bind(valueSignal);
+    const applyControlValue = (value) => {
+        updatingFromSignal = true;
+        if (!Object.is(control.value, value)) {
+            const untypedControl = control;
+            untypedControl.setValue(value, { emitEvent: true });
+            untypedControl.markAsDirty();
+        }
+        updatingFromSignal = false;
+    };
+    valueSignal.set = (value) => {
+        const currentVersion = ++versionCounter;
+        originalSet(value);
+        if (updatingFromControl) {
+            return;
+        }
+        if (lastControlVersion > currentVersion) {
+            return;
+        }
+        applyControlValue(value);
+    };
+    valueSignal.update = (updater) => {
+        const next = updater(valueSignal());
+        valueSignal.set(next);
+    };
+    const pushUpdateFromControl = (value) => {
+        updatingFromControl = true;
+        lastControlVersion = ++versionCounter;
+        originalSet(value);
+        updatingFromControl = false;
+    };
+    const handleControlChange = (value) => {
+        if (updatingFromSignal) {
+            return;
+        }
+        if (debounceMs > 0) {
+            if (controlDebounceTimer) {
+                clearTimeout(controlDebounceTimer);
+            }
+            controlDebounceTimer = setTimeout(() => {
+                controlDebounceTimer = null;
+                pushUpdateFromControl(value);
+            }, debounceMs);
+            return;
+        }
+        pushUpdateFromControl(value);
+    };
+    const subscription = control.valueChanges.subscribe((value) => {
+        handleControlChange(value);
+    });
+    cleanupCallbacks.push(() => {
+        subscription.unsubscribe();
+        valueSignal.set = originalSet;
+        valueSignal.update = originalUpdate;
+        if (controlDebounceTimer) {
+            clearTimeout(controlDebounceTimer);
+        }
+    });
+}
+function connectFormArrayAndSignal(formArray, arraySignal, path, validators, asyncValidators, cleanupCallbacks, connectControlRecursive) {
+    let updatingFromControl = false;
+    let updatingFromSignal = false;
+    const originalSet = arraySignal.set.bind(arraySignal);
+    const originalUpdate = arraySignal.update.bind(arraySignal);
+    arraySignal.set = (value) => {
+        originalSet(value);
+        if (updatingFromControl) {
+            return;
+        }
+        updatingFromSignal = true;
+        syncFormArrayFromValue(formArray, value, path, validators, asyncValidators, connectControlRecursive);
+        formArray.markAsDirty();
+        updatingFromSignal = false;
+    };
+    arraySignal.update = (updater) => {
+        const next = updater(arraySignal());
+        arraySignal.set(next);
+    };
+    const subscription = formArray.valueChanges.subscribe((value) => {
+        if (updatingFromSignal) {
+            return;
+        }
+        updatingFromControl = true;
+        originalSet(value);
+        updatingFromControl = false;
+    });
+    cleanupCallbacks.push(() => {
+        subscription.unsubscribe();
+        arraySignal.set = originalSet;
+        arraySignal.update = originalUpdate;
+    });
+    syncFormArrayFromValue(formArray, arraySignal(), path, validators, asyncValidators, connectControlRecursive);
+}
+function syncFormArrayFromValue(formArray, nextValue, path, validators, asyncValidators, connectControlRecursive) {
+    if (!Array.isArray(nextValue)) {
+        nextValue = [];
+    }
+    while (formArray.length > nextValue.length) {
+        formArray.removeAt(formArray.length - 1);
+    }
+    nextValue.forEach((item, index) => {
+        const childPath = joinPath(path, String(index));
+        const existing = formArray.at(index);
+        if (!existing) {
+            const control = createAbstractControl(item, childPath, validators, asyncValidators);
+            formArray.insert(index, control);
+            connectControlRecursive(control, childPath);
+            return;
+        }
+        if (existing instanceof FormArray) {
+            syncFormArrayFromValue(existing, Array.isArray(item) ? item : [], childPath, validators, asyncValidators, connectControlRecursive);
+            return;
+        }
+        if (existing instanceof FormGroup) {
+            if (isPlainObject(item)) {
+                existing.setValue(item, {
+                    emitEvent: false,
+                });
+            }
+            return;
+        }
+        if (!Object.is(existing.value, item)) {
+            const untypedExisting = existing;
+            untypedExisting.setValue(item, { emitEvent: false });
+        }
+    });
+}
+function collectControlSnapshot(control) {
+    const snapshot = {
+        syncErrors: {},
+        asyncErrors: {},
+        touched: {},
+        pending: {},
+    };
+    traverseControls(control, (currentPath, currentControl) => {
+        if (!currentPath) {
+            return;
+        }
+        if (currentControl.touched) {
+            snapshot.touched[currentPath] = true;
+        }
+        if (currentControl.pending) {
+            snapshot.pending[currentPath] = true;
+        }
+        const errors = currentControl.errors;
+        if (!errors) {
+            return;
+        }
+        const syncMessage = errors[SYNC_ERROR_KEY];
+        if (typeof syncMessage === 'string') {
+            snapshot.syncErrors[currentPath] = syncMessage;
+        }
+        const asyncMessage = errors[ASYNC_ERROR_KEY];
+        if (typeof asyncMessage === 'string') {
+            snapshot.asyncErrors[currentPath] = asyncMessage;
+        }
+    }, '');
+    return snapshot;
+}
+function traverseControls(control, visitor, path = '') {
+    visitor(path, control);
+    if (control instanceof FormGroup) {
+        Object.entries(control.controls).forEach(([key, child]) => {
+            traverseControls(child, visitor, joinPath(path, key));
+        });
+        return;
+    }
+    if (control instanceof FormArray) {
+        control.controls.forEach((child, index) => {
+            traverseControls(child, visitor, joinPath(path, String(index)));
+        });
+    }
+}
+function waitForPending(control) {
+    if (!control.pending) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        const subscription = control.statusChanges.subscribe(() => {
+            if (!control.pending) {
+                subscription.unsubscribe();
+                resolve();
+            }
+        });
+    });
+}
+function isPlainObject(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.prototype.toString.call(value) === '[object Object]');
+}
+function tryInjectDestroyRef() {
+    try {
+        return inject(DestroyRef);
+    }
+    catch {
+        return null;
+    }
+}
+function normalizeSyncValidators(base, fieldConfigs) {
+    const buckets = new Map();
+    for (const [path, validator] of Object.entries(base)) {
+        const existing = buckets.get(path) ?? [];
+        existing.push(validator);
+        buckets.set(path, existing);
+    }
+    for (const [path, config] of Object.entries(fieldConfigs)) {
+        const validators = toValidatorArray(config.validators);
+        if (validators.length === 0) {
+            continue;
+        }
+        const existing = buckets.get(path) ?? [];
+        existing.push(...validators);
+        buckets.set(path, existing);
+    }
+    const normalized = {};
+    buckets.forEach((validators, path) => {
+        normalized[path] = (value) => {
+            for (const validator of validators) {
+                const result = validator(value);
+                if (result) {
+                    return result;
+                }
+            }
+            return null;
+        };
+    });
+    return { ...base, ...normalized };
+}
+function normalizeAsyncValidators(base, fieldConfigs) {
+    const buckets = new Map();
+    for (const [path, validator] of Object.entries(base)) {
+        const existing = buckets.get(path) ?? [];
+        existing.push(validator);
+        buckets.set(path, existing);
+    }
+    for (const [path, config] of Object.entries(fieldConfigs)) {
+        const validators = toValidatorArray(config.asyncValidators);
+        if (validators.length === 0) {
+            continue;
+        }
+        const existing = buckets.get(path) ?? [];
+        existing.push(...validators);
+        buckets.set(path, existing);
+    }
+    const normalized = {};
+    buckets.forEach((validators, path) => {
+        normalized[path] = async (value) => {
+            for (const validator of validators) {
+                const maybeAsync = validator(value);
+                const result = isObservable(maybeAsync)
+                    ? await firstValueFrom(maybeAsync)
+                    : await maybeAsync;
+                if (result) {
+                    return result;
+                }
+            }
+            return null;
+        };
+    });
+    return { ...base, ...normalized };
+}
+function toValidatorArray(input) {
+    if (!input) {
+        return [];
+    }
+    if (Array.isArray(input)) {
+        return input;
+    }
+    return Object.values(input);
+}
+function hydrateInitialValues(initialValues, persistKey, storage) {
+    const baseClone = deepClone(initialValues);
+    if (!persistKey || !storage) {
+        return { values: baseClone };
+    }
+    try {
+        const storedRaw = storage.getItem(persistKey);
+        if (!storedRaw) {
+            return { values: baseClone };
+        }
+        const parsed = JSON.parse(storedRaw);
+        const merged = mergeDeep(baseClone, parsed);
+        return { values: merged };
+    }
+    catch {
+        return { values: baseClone };
+    }
+}
+function assertTreeNode(state) {
+    if (!state || typeof state !== 'object') {
+        throw new Error('Invalid state structure for form tree');
+    }
+}
+function resolveFieldConfig(fieldConfigs, path) {
+    if (fieldConfigs[path]) {
+        return fieldConfigs[path];
+    }
+    const keys = Object.keys(fieldConfigs);
+    let match;
+    for (const key of keys) {
+        if (!key.includes('*')) {
+            continue;
+        }
+        if (matchPath(key, path)) {
+            if (!match || match.key.length < key.length) {
+                match = { key, config: fieldConfigs[key] };
+            }
+        }
+    }
+    if (match) {
+        return match.config;
+    }
+    return fieldConfigs['*'];
+}
+function findValidator(map, path) {
+    if (map[path]) {
+        return map[path];
+    }
+    let candidate;
+    for (const key of Object.keys(map)) {
+        if (!key.includes('*')) {
+            continue;
+        }
+        if (matchPath(key, path)) {
+            if (!candidate || candidate.key.length < key.length) {
+                candidate = { key, value: map[key] };
+            }
+        }
+    }
+    if (candidate) {
+        return candidate.value;
+    }
+    return map['*'];
+}
+function createPersistController(formGroup, persistKey, storage, debounceMs, cleanupCallbacks) {
+    if (!persistKey || !storage) {
+        return {
+            schedulePersist: () => undefined,
+            persistImmediately: () => undefined,
+        };
+    }
+    let timer = null;
+    const persist = () => {
+        try {
+            const payload = JSON.stringify(formGroup.getRawValue());
+            storage.setItem(persistKey, payload);
+        }
+        catch {
+        }
+    };
+    const schedulePersist = () => {
+        if (debounceMs <= 0) {
+            persist();
+            return;
+        }
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+            timer = null;
+            persist();
+        }, debounceMs);
+    };
+    cleanupCallbacks.push(() => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+    });
+    return {
+        schedulePersist,
+        persistImmediately: persist,
+    };
+}
 class SignalValueDirective {
     signalTreeSignalValue;
     signalTreeSignalValueChange = new EventEmitter();
@@ -296,8 +809,8 @@ class SignalValueDirective {
     setDisabledState(isDisabled) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SignalValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: SignalValueDirective, isStandalone: true, selector: "[signalTreeSignalValue]", inputs: { signalTreeSignalValue: "signalTreeSignalValue" }, outputs: { signalTreeSignalValueChange: "signalTreeSignalValueChange" }, host: { listeners: { "input": "handleChange($event)", "change": "handleChange($event)", "blur": "handleBlur()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignalValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: SignalValueDirective, isStandalone: true, selector: "[signalTreeSignalValue]", inputs: { signalTreeSignalValue: "signalTreeSignalValue" }, outputs: { signalTreeSignalValueChange: "signalTreeSignalValueChange" }, host: { listeners: { "input": "handleChange($event)", "change": "handleChange($event)", "blur": "handleBlur()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SignalValueDirective),
@@ -305,7 +818,7 @@ class SignalValueDirective {
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SignalValueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignalValueDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[signalTreeSignalValue]',
@@ -332,69 +845,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: HostListener,
                 args: ['blur']
             }] } });
-const validators = {
-    required: (message = 'Required') => (value) => !value ? message : null,
-    email: (message = 'Invalid email') => (value) => {
+const SIGNAL_FORM_DIRECTIVES = [SignalValueDirective];
+
+function required(message = 'Required') {
+    return (value) => (!value ? message : null);
+}
+function email(message = 'Invalid email') {
+    return (value) => {
         const strValue = value;
         return strValue && !strValue.includes('@') ? message : null;
-    },
-    minLength: (min) => (value) => {
+    };
+}
+function minLength(min, message) {
+    return (value) => {
         const strValue = value;
-        return strValue && strValue.length < min ? `Min ${min} characters` : null;
-    },
-    pattern: (regex, message = 'Invalid format') => (value) => {
+        const errorMsg = message ?? `Min ${min} characters`;
+        return strValue && strValue.length < min ? errorMsg : null;
+    };
+}
+function maxLength(max, message) {
+    return (value) => {
+        const strValue = value;
+        const errorMsg = message ?? `Max ${max} characters`;
+        return strValue && strValue.length > max ? errorMsg : null;
+    };
+}
+function pattern(regex, message = 'Invalid format') {
+    return (value) => {
         const strValue = value;
         return strValue && !regex.test(strValue) ? message : null;
-    },
-};
-const asyncValidators = {
-    unique: (checkFn, message = 'Already exists') => async (value) => {
+    };
+}
+function min(min, message) {
+    return (value) => {
+        const numValue = value;
+        const errorMsg = message ?? `Must be at least ${min}`;
+        return numValue < min ? errorMsg : null;
+    };
+}
+function max(max, message) {
+    return (value) => {
+        const numValue = value;
+        const errorMsg = message ?? `Must be at most ${max}`;
+        return numValue > max ? errorMsg : null;
+    };
+}
+function compose(validators) {
+    return (value) => {
+        for (const validator of validators) {
+            const error = validator(value);
+            if (error) {
+                return error;
+            }
+        }
+        return null;
+    };
+}
+
+function unique(checkFn, message = 'Already exists') {
+    return async (value) => {
         if (!value)
             return null;
         const exists = await checkFn(value);
         return exists ? message : null;
-    },
-};
-function toObservable(signal) {
-    return new Observable((subscriber) => {
-        try {
-            const effectRef = effect(() => {
-                subscriber.next(signal());
-            }, ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
-            return () => effectRef.destroy();
+    };
+}
+function debounce(validator, delayMs) {
+    let timeoutId;
+    return async (value) => {
+        return new Promise((resolve) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(async () => {
+                const maybeAsync = validator(value);
+                const result = isObservable(maybeAsync)
+                    ? await firstValueFrom(maybeAsync)
+                    : await maybeAsync;
+                resolve(result);
+            }, delayMs);
+        });
+    };
+}
+
+function withFormHistory(formTree, options = {}) {
+    const capacity = Math.max(1, options.capacity ?? 10);
+    const historySignal = signal({
+        past: [],
+        present: deepClone(formTree.form.getRawValue()),
+        future: [],
+    }, ...(ngDevMode ? [{ debugName: "historySignal" }] : []));
+    let recording = true;
+    let suppressUpdates = 0;
+    let internalHistory = {
+        past: [],
+        present: deepClone(formTree.form.getRawValue()),
+        future: [],
+    };
+    const subscription = formTree.form.valueChanges.subscribe(() => {
+        if (suppressUpdates > 0) {
+            suppressUpdates--;
+            return;
         }
-        catch {
-            subscriber.next(signal());
-            return () => {
+        if (!recording) {
+            internalHistory = {
+                ...internalHistory,
+                present: deepClone(formTree.form.getRawValue()),
+            };
+            return;
+        }
+        const snapshot = deepClone(formTree.form.getRawValue());
+        if (snapshotsEqual(internalHistory.present, snapshot)) {
+            internalHistory = {
+                ...internalHistory,
+                present: snapshot,
             };
+            historySignal.set(cloneHistory(internalHistory));
+            return;
         }
+        const updatedPast = [...internalHistory.past, internalHistory.present];
+        if (updatedPast.length > capacity) {
+            updatedPast.shift();
+        }
+        internalHistory = {
+            past: updatedPast,
+            present: snapshot,
+            future: [],
+        };
+        historySignal.set(cloneHistory(internalHistory));
     });
-}
-function createAuditMiddleware(auditLog, getMetadata) {
-    return {
-        id: 'audit',
-        after: (action, payload, oldState, newState) => {
-            const changes = getChanges(oldState, newState);
-            if (Object.keys(changes).length > 0) {
-                auditLog.push({
-                    timestamp: Date.now(),
-                    changes,
-                    metadata: getMetadata?.(),
-                });
-            }
-        },
+    const originalDestroy = formTree.destroy;
+    formTree.destroy = () => {
+        subscription.unsubscribe();
+        originalDestroy();
     };
-}
-function getChanges(oldState, newState) {
-    const changes = {};
-    for (const key in newState) {
-        if (oldState[key] !== newState[key]) {
-            changes[key] = newState[key];
+    const undo = () => {
+        const history = historySignal();
+        if (history.past.length === 0) {
+            return;
         }
+        const previous = deepClone(history.past[history.past.length - 1]);
+        recording = false;
+        suppressUpdates++;
+        formTree.setValues(previous);
+        recording = true;
+        internalHistory = {
+            past: history.past.slice(0, -1),
+            present: previous,
+            future: [history.present, ...history.future],
+        };
+        historySignal.set(cloneHistory(internalHistory));
+    };
+    const redo = () => {
+        const history = historySignal();
+        if (history.future.length === 0) {
+            return;
+        }
+        const next = deepClone(history.future[0]);
+        recording = false;
+        suppressUpdates++;
+        formTree.setValues(next);
+        recording = true;
+        internalHistory = {
+            past: [...history.past, history.present],
+            present: next,
+            future: history.future.slice(1),
+        };
+        historySignal.set(cloneHistory(internalHistory));
+    };
+    const clearHistory = () => {
+        internalHistory = {
+            past: [],
+            present: deepClone(formTree.form.getRawValue()),
+            future: [],
+        };
+        historySignal.set(cloneHistory(internalHistory));
+    };
+    function cloneHistory(state) {
+        return {
+            past: state.past.map((entry) => deepClone(entry)),
+            present: deepClone(state.present),
+            future: state.future.map((entry) => deepClone(entry)),
+        };
     }
-    return changes;
+    return Object.assign(formTree, {
+        undo,
+        redo,
+        clearHistory,
+        history: historySignal.asReadonly(),
+    });
 }
-const SIGNAL_FORM_DIRECTIVES = [SignalValueDirective];
 
-export { SIGNAL_FORM_DIRECTIVES, SignalValueDirective, asyncValidators, createAuditMiddleware, createFormTree, toObservable, validators };
+export { FormValidationError, SIGNAL_FORM_DIRECTIVES, SignalValueDirective, compose, createFormTree, createVirtualFormArray, debounce, email, max, maxLength, min, minLength, pattern, required, unique, withFormHistory };
 //# sourceMappingURL=signaltree-ng-forms.mjs.map