@angular/forms 21.0.0-next.2 → 21.0.0-next.4

package/fesm2022/signals.mjs

@@ -1,14 +1,14 @@
 /**
- * @license Angular v21.0.0-next.2
+ * @license Angular v21.0.0-next.4
  * (c) 2010-2025 Google LLC. https://angular.io/
  * License: MIT
  */
 
 import { httpResource } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { computed, untracked, runInInjectionContext, linkedSignal, Injector, signal, APP_ID, effect, inject, ɵSIGNAL as _SIGNAL, Renderer2, ElementRef, afterNextRender, DestroyRef, Directive, Input, reflectComponentType, OutputEmitterRef, EventEmitter } from '@angular/core';
-import { SIGNAL } from '@angular/core/primitives/signals';
+import { computed, untracked, ɵSIGNAL as _SIGNAL, inject, Injector, Renderer2, signal, ElementRef, effect, afterNextRender, DestroyRef, Directive, Input, reflectComponentType, OutputEmitterRef, EventEmitter, runInInjectionContext, linkedSignal, APP_ID, ɵisPromise as _isPromise, resource } from '@angular/core';
 import { Validators, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { SIGNAL } from '@angular/core/primitives/signals';
 
 /**
  * A version of `Array.isArray` that handles narrowing of readonly arrays properly.
@@ -1071,13 +1071,19 @@ function assertPathIsCurrent(path) {
 /**
  * Represents a property that may be defined on a field when it is created using a `property` rule
  * in the schema. A particular `Property` can only be defined on a particular field **once**.
+ *
+ * @experimental 21.0.0
  */
 class Property {
     brand;
     /** Use {@link createProperty}. */
     constructor() { }
 }
-/** Creates a {@link Property}. */
+/**
+ * Creates a {@link Property}.
+ *
+ * @experimental 21.0.0
+ */
 function createProperty() {
     return new Property();
 }
@@ -1086,6 +1092,8 @@ function createProperty() {
  * function. A value can be contributed to the aggregated value for a field using an
  * `aggregateProperty` rule in the schema. There may be multiple rules in a schema that contribute
  * values to the same `AggregateProperty` of the same field.
+ *
+ * @experimental 21.0.0
  */
 class AggregateProperty {
     reduce;
@@ -1102,18 +1110,24 @@ class AggregateProperty {
  * the given `reduce` and `getInitial` functions.
  * @param reduce The reducer function.
  * @param getInitial A function that gets the initial value for the reduce operation.
+ *
+ * @experimental 21.0.0
  */
 function reducedProperty(reduce, getInitial) {
     return new AggregateProperty(reduce, getInitial);
 }
 /**
  * Creates an aggregate property that reduces its individual values into a list.
+ *
+ * @experimental 21.0.0
  */
 function listProperty() {
     return reducedProperty((acc, item) => (item === undefined ? acc : [...acc, item]), () => []);
 }
 /**
  * Creates an aggregate property that reduces its individual values by taking their min.
+ *
+ * @experimental 21.0.0
  */
 function minProperty() {
     return reducedProperty((prev, next) => {
@@ -1128,6 +1142,8 @@ function minProperty() {
 }
 /**
  * Creates an aggregate property that reduces its individual values by taking their max.
+ *
+ * @experimental 21.0.0
  */
 function maxProperty() {
     return reducedProperty((prev, next) => {
@@ -1142,38 +1158,54 @@ function maxProperty() {
 }
 /**
  * Creates an aggregate property that reduces its individual values by logically or-ing them.
+ *
+ * @experimental 21.0.0
  */
 function orProperty() {
     return reducedProperty((prev, next) => prev || next, () => false);
 }
 /**
  * Creates an aggregate property that reduces its individual values by logically and-ing them.
+ *
+ * @experimental 21.0.0
  */
 function andProperty() {
     return reducedProperty((prev, next) => prev && next, () => true);
 }
 /**
  * An aggregate property representing whether the field is required.
+ *
+ * @experimental 21.0.0
  */
 const REQUIRED = orProperty();
 /**
  * An aggregate property representing the min value of the field.
+ *
+ * @experimental 21.0.0
  */
 const MIN = maxProperty();
 /**
  * An aggregate property representing the max value of the field.
+ *
+ * @experimental 21.0.0
  */
 const MAX = minProperty();
 /**
  * An aggregate property representing the min length of the field.
+ *
+ * @experimental 21.0.0
  */
 const MIN_LENGTH = maxProperty();
 /**
  * An aggregate property representing the max length of the field.
+ *
+ * @experimental 21.0.0
  */
 const MAX_LENGTH = minProperty();
 /**
  * An aggregate property representing the patterns the field must match.
+ *
+ * @experimental 21.0.0
  */
 const PATTERN = listProperty();
 
@@ -1186,6 +1218,8 @@ const PATTERN = listProperty();
  *   and `false` when it is not disabled.
  * @template TValue The type of value stored in the field the logic is bound to.
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function disabled(path, logic) {
     assertPathIsCurrent(path);
@@ -1212,6 +1246,8 @@ function disabled(path, logic) {
  * @param logic A reactive function that returns `true` when the field is readonly.
  * @template TValue The type of value stored in the field the logic is bound to.
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function readonly(path, logic = () => true) {
     assertPathIsCurrent(path);
@@ -1234,6 +1270,8 @@ function readonly(path, logic = () => true) {
  * @param logic A reactive function that returns `true` when the field is hidden.
  * @template TValue The type of value stored in the field the logic is bound to.
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function hidden(path, logic) {
     assertPathIsCurrent(path);
@@ -1247,6 +1285,8 @@ function hidden(path, logic) {
  * @param logic A `Validator` that returns the current validation errors.
  * @template TValue The type of value stored in the field the logic is bound to.
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function validate(path, logic) {
     assertPathIsCurrent(path);
@@ -1261,6 +1301,8 @@ function validate(path, logic) {
  *   Errors returned by the validator may specify a target field to indicate an error on a child field.
  * @template TValue The type of value stored in the field the logic is bound to.
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function validateTree(path, logic) {
     assertPathIsCurrent(path);
@@ -1276,6 +1318,8 @@ function validateTree(path, logic) {
  * @template TValue The type of value stored in the field the logic is bound to.
  * @template TPropItem The type of value the property aggregates over.
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function aggregateProperty(path, prop, logic) {
     assertPathIsCurrent(path);
@@ -1308,6 +1352,8 @@ function property(path, ...rest) {
  * @template TParams The type of parameters to the resource.
  * @template TResult The type of result returned by the resource
  * @template TPathKind The kind of path being validated (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function validateAsync(path, opts) {
     assertPathIsCurrent(path);
@@ -1353,6 +1399,8 @@ function validateAsync(path, opts) {
  * @template TValue The type of value stored in the field being validated.
  * @template TResult The type of result returned by the httpResource
  * @template TPathKind The kind of path being validated (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
 function validateHttp(path, opts) {
     validateAsync(path, {
@@ -1363,332 +1411,852 @@ function validateHttp(path, opts) {
 }
 
 /**
- * `FieldContext` implementation, backed by a `FieldNode`.
+ * A fake version of `NgControl` provided by the `Control` directive. This allows interoperability
+ * with a wider range of components designed to work with reactive forms, in particular ones that
+ * inject the `NgControl`. The interop control does not implement *all* properties and methods of
+ * the real `NgControl`, but does implement some of the most commonly used ones that have a clear
+ * equivalent in signal forms.
  */
-class FieldNodeContext {
-    node;
-    /**
-     * Cache of paths that have been resolved for this context.
-     *
-     * For each resolved path we keep track of a signal of field that it maps to rather than a static
-     * field, since it theoretically could change. In practice for the current system it should not
-     * actually change, as they only place we currently track fields moving within the parent
-     * structure is for arrays, and paths do not currently support array indexing.
-     */
-    cache = new WeakMap();
-    constructor(
-    /** The field node this context corresponds to. */
-    node) {
-        this.node = node;
+class InteropNgControl {
+    field;
+    constructor(field) {
+        this.field = field;
     }
-    /**
-     * Resolves a target path relative to this context.
-     * @param target The path to resolve
-     * @returns The field corresponding to the target path.
-     */
-    resolve(target) {
-        if (!this.cache.has(target)) {
-            const resolver = computed(() => {
-                const targetPathNode = FieldPathNode.unwrapFieldPath(target);
-                // First, find the field where the root our target path was merged in.
-                // We determine this by walking up the field tree from the current field and looking for
-                // the place where the LogicNodeBuilder from the target path's root was merged in.
-                // We always make sure to walk up at least as far as the depth of the path we were bound to.
-                // This ensures that we do not accidentally match on the wrong application of a recursively
-                // applied schema.
-                let field = this.node;
-                let stepsRemaining = getBoundPathDepth();
-                while (stepsRemaining > 0 || !field.structure.logic.hasLogic(targetPathNode.root.logic)) {
-                    stepsRemaining--;
-                    field = field.structure.parent;
-                    if (field === undefined) {
-                        throw new Error('Path is not part of this field tree.');
-                    }
-                }
-                // Now, we can navigate to the target field using the relative path in the target path node
-                // to traverse down from the field we just found.
-                for (let key of targetPathNode.keys) {
-                    field = field.structure.getChild(key);
-                    if (field === undefined) {
-                        throw new Error(`Cannot resolve path .${targetPathNode.keys.join('.')} relative to field ${[
-                            '<root>',
-                            ...this.node.structure.pathKeys(),
-                        ].join('.')}.`);
-                    }
-                }
-                return field.fieldProxy;
-            }, ...(ngDevMode ? [{ debugName: "resolver" }] : []));
-            this.cache.set(target, resolver);
-        }
-        return this.cache.get(target)();
+    control = this;
+    get value() {
+        return this.field().value();
     }
-    get field() {
-        return this.node.fieldProxy;
+    get valid() {
+        return this.field().valid();
     }
-    get state() {
-        return this.node;
+    get invalid() {
+        return this.field().invalid();
     }
-    get value() {
-        return this.node.structure.value;
+    get pending() {
+        return this.field().pending();
     }
-    get key() {
-        return this.node.structure.keyInParent;
+    get disabled() {
+        return this.field().disabled();
     }
-    index = computed(() => {
-        // Attempt to read the key first, this will throw an error if we're on a root field.
-        const key = this.key();
-        // Assert that the parent is actually an array.
-        if (!isArray(untracked(this.node.structure.parent.value))) {
-            throw new Error(`RuntimeError: cannot access index, parent field is not an array`);
-        }
-        // Return the key as a number if we are indeed inside an array field.
-        return Number(key);
-    }, ...(ngDevMode ? [{ debugName: "index" }] : []));
-    fieldOf = (p) => this.resolve(p);
-    stateOf = (p) => this.resolve(p)();
-    valueOf = (p) => this.resolve(p)().value();
-}
-
-/**
- * Tracks custom properties associated with a `FieldNode`.
- */
-class FieldPropertyState {
-    node;
-    /** A map of all `Property` and `AggregateProperty` that have been defined for this field. */
-    properties = new Map();
-    constructor(node) {
-        this.node = node;
-        // Field nodes (and thus their property state) are created in a linkedSignal in order to mirror
-        // the structure of the model data. We need to run the property factories untracked so that they
-        // do not cause recomputation of the linkedSignal.
-        untracked(() => 
-        // Property factories are run in the form's injection context so they can create resources
-        // and inject DI dependencies.
-        runInInjectionContext(this.node.structure.injector, () => {
-            for (const [key, factory] of this.node.logicNode.logic.getPropertyFactoryEntries()) {
-                this.properties.set(key, factory(this.node.context));
-            }
-        }));
+    get enabled() {
+        return !this.field().disabled();
     }
-    /** Gets the value of a `Property` or `AggregateProperty` for the field. */
-    get(prop) {
-        if (prop instanceof Property) {
-            return this.properties.get(prop);
+    get errors() {
+        const errors = this.field().errors();
+        if (errors.length === 0) {
+            return null;
         }
-        if (!this.properties.has(prop)) {
-            const logic = this.node.logicNode.logic.getAggregateProperty(prop);
-            const result = computed(() => logic.compute(this.node.context), ...(ngDevMode ? [{ debugName: "result" }] : []));
-            this.properties.set(prop, result);
+        const errObj = {};
+        for (const error of errors) {
+            errObj[error.kind] = error;
         }
-        return this.properties.get(prop);
+        return errObj;
     }
-    /**
-     * Checks whether the current property state has the given property.
-     * @param prop
-     * @returns
-     */
-    has(prop) {
-        if (prop instanceof AggregateProperty) {
-            // For aggregate properties, they get added to the map lazily, on first access, so we can't
-            // rely on checking presence in the properties map. Instead we check if there is any logic for
-            // the given property.
-            return this.node.logicNode.logic.hasAggregateProperty(prop);
+    get pristine() {
+        return !this.field().dirty();
+    }
+    get dirty() {
+        return this.field().dirty();
+    }
+    get touched() {
+        return this.field().touched();
+    }
+    get untouched() {
+        return !this.field().touched();
+    }
+    get status() {
+        if (this.field().disabled()) {
+            return 'DISABLED';
         }
-        else {
-            // Non-aggregate proeprties get added to our properties map on construction, so we can just
-            // refer to their presence in the map.
-            return this.properties.has(prop);
+        if (this.field().valid()) {
+            return 'VALID';
+        }
+        if (this.field().invalid()) {
+            return 'INVALID';
+        }
+        if (this.field().pending()) {
+            return 'PENDING';
+        }
+        throw Error('AssertionError: unknown form control status');
+    }
+    valueAccessor = null;
+    hasValidator(validator) {
+        // This addresses a common case where users look for the presence of `Validators.required` to
+        // determine whether or not to show a required "*" indicator in the UI.
+        if (validator === Validators.required) {
+            return this.field().property(REQUIRED)();
         }
+        return false;
+    }
+    updateValueAndValidity() {
+        // No-op since value and validity are always up to date in signal forms.
+        // We offer this method so that reactive forms code attempting to call it doesn't error.
     }
 }
 
-/**
- * Proxy handler which implements `Field<T>` on top of `FieldNode`.
- */
-const FIELD_PROXY_HANDLER = {
-    get(getTgt, p) {
-        const tgt = getTgt();
-        // First, check whether the requested property is a defined child node of this node.
-        const child = tgt.structure.getChild(p);
-        if (child !== undefined) {
-            // If so, return the child node's `Field` proxy, allowing the developer to continue navigating
-            // the form structure.
-            return child.fieldProxy;
-        }
-        // Otherwise, we need to consider whether the properties they're accessing are related to array
-        // iteration. We're specifically interested in `length`, but we only want to pass this through
-        // if the value is actually an array.
-        //
-        // We untrack the value here to avoid spurious reactive notifications. In reality, we've already
-        // incurred a dependency on the value via `tgt.getChild()` above.
-        const value = untracked(tgt.value);
-        if (isArray(value)) {
-            // Allow access to the length for field arrays, it should be the same as the length of the data.
-            if (p === 'length') {
-                return tgt.value().length;
-            }
-            // Allow access to the iterator. This allows the user to spread the field array into a
-            // standard array in order to call methods like `filter`, `map`, etc.
-            if (p === Symbol.iterator) {
-                return Array.prototype[p];
-            }
-            // Note: We can consider supporting additional array methods if we want in the future,
-            // but they should be thoroughly tested. Just forwarding the method directly from the
-            // `Array` prototype results in broken behavior for some methods like `map`.
-        }
-        // Otherwise, this property doesn't exist.
+// TODO: These utilities to be replaced with proper integration into framework.
+function privateGetComponentInstance(injector) {
+    assertIsNodeInjector(injector);
+    if (injector._tNode.directiveStart === 0 || injector._tNode.componentOffset === -1) {
         return undefined;
-    },
-};
-
-/**
- * Creates a writable signal for a specific property on a source writeable signal.
- * @param source A writeable signal to derive from
- * @param prop A signal of a property key of the source value
- * @returns A writeable signal for the given property of the source value.
- * @template S The source value type
- * @template K The key type for S
- */
-function deepSignal(source, prop) {
-    // Memoize the property.
-    const read = computed(() => source()[prop()]);
-    read[SIGNAL] = source[SIGNAL];
-    read.set = (value) => {
-        source.update((current) => valueForWrite(current, value, prop()));
-    };
-    read.update = (fn) => {
-        read.set(fn(untracked(read)));
-    };
-    read.asReadonly = () => read;
-    return read;
+    }
+    return injector._lView[injector._tNode.directiveStart + injector._tNode.componentOffset];
 }
-/**
- * Gets an updated root value to use when setting a value on a deepSignal with the given path.
- * @param sourceValue The current value of the deepSignal's source.
- * @param newPropValue The value being written to the deepSignal's property
- * @param prop The deepSignal's property key
- * @returns An updated value for the deepSignal's source
- */
-function valueForWrite(sourceValue, newPropValue, prop) {
-    if (isArray(sourceValue)) {
-        const newValue = [...sourceValue];
-        newValue[prop] = newPropValue;
-        return newValue;
+function privateSetComponentInput(inputSignal, value) {
+    inputSignal[_SIGNAL].applyValueToInputSignal(inputSignal[_SIGNAL], value);
+}
+function privateIsSignalInput(value) {
+    return isInputSignal(value);
+}
+function privateIsModelInput(value) {
+    return isInputSignal(value) && isObject(value) && 'subscribe' in value;
+}
+function privateRunEffect(ref) {
+    ref[_SIGNAL].run();
+}
+function assertIsNodeInjector(injector) {
+    if (!('_tNode' in injector)) {
+        throw new Error('Expected a Node Injector');
     }
-    else {
-        return { ...sourceValue, [prop]: newPropValue };
+}
+function isInputSignal(value) {
+    if (!isObject(value) || !(_SIGNAL in value)) {
+        return false;
     }
+    const node = value[_SIGNAL];
+    return isObject(node) && 'applyValueToInputSignal' in node;
 }
 
-/** Structural component of a `FieldNode` which tracks its path, parent, and children. */
-class FieldNodeStructure {
-    logic;
-    /** Added to array elements for tracking purposes. */
-    // TODO: given that we don't ever let a field move between parents, is it safe to just extract
-    // this to a shared symbol for all fields, rather than having a separate one per parent?
-    identitySymbol = Symbol();
-    /** Lazily initialized injector. Do not access directly, access via `injector` getter instead. */
-    _injector = undefined;
-    /** Lazily initialized injector. */
-    get injector() {
-        this._injector ??= Injector.create({
-            providers: [],
-            parent: this.fieldManager.injector,
-        });
-        return this._injector;
+/**
+ * Binds a form `Field` to a UI control that edits it. A UI control can be one of several things:
+ * 1. A native HTML input or textarea
+ * 2. A signal forms custom control that implements `FormValueControl` or `FormCheckboxControl`
+ * 3. A component that provides a ControlValueAccessor. This should only be used to backwards
+ *    compatibility with reactive forms. Prefer options (1) and (2).
+ *
+ * This directive has several responsibilities:
+ * 1. Two-way binds the field's value with the UI control's value
+ * 2. Binds additional forms related state on the field to the UI control (disabled, required, etc.)
+ * 3. Relays relevant events on the control to the field (e.g. marks field touched on blur)
+ * 4. Provides a fake `NgControl` that implements a subset of the features available on the reactive
+ *    forms `NgControl`. This is provided to improve interoperability with controls designed to work
+ *    with reactive forms. It should not be used by controls written for signal forms.
+ *
+ * @experimental 21.0.0
+ */
+class Control {
+    /** The injector for this component. */
+    injector = inject(Injector);
+    renderer = inject(Renderer2);
+    /** Whether state synchronization with the field has been setup yet. */
+    initialized = false;
+    /** The field that is bound to this control. */
+    field = signal(undefined, ...(ngDevMode ? [{ debugName: "field" }] : []));
+    // If `[control]` is applied to a custom UI control, it wants to synchronize state in the field w/
+    // the inputs of that custom control. This is difficult to do in user-land. We use `effect`, but
+    // effects don't run before the lifecycle hooks of the component. This is usually okay, but has
+    // one significant issue: the UI control's required inputs won't be set in time for those
+    // lifecycle hooks to run.
+    //
+    // Eventually we can build custom functionality for the `Control` directive into the framework,
+    // but for now we work around this limitation with a hack. We use an `@Input` instead of a
+    // signal-based `input()` for the `[control]` to hook the exact moment inputs are being set,
+    // before the important lifecycle hooks of the UI control. We can then initialize all our effects
+    // and force them to run immediately, ensuring all required inputs have values.
+    set _field(value) {
+        this.field.set(value);
+        if (!this.initialized) {
+            this.initialize();
+        }
     }
-    constructor(
-    /** The logic to apply to this field. */
-    logic) {
-        this.logic = logic;
+    /** The field state of the bound field. */
+    state = computed(() => this.field()(), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** The HTMLElement this directive is attached to. */
+    el = inject(ElementRef);
+    /** The NG_VALUE_ACCESSOR array for the host component. */
+    cvaArray = inject(NG_VALUE_ACCESSOR, { optional: true });
+    /** The Cached value for the lazily created interop NgControl. */
+    _ngControl;
+    /** A fake NgControl provided for better interop with reactive forms. */
+    get ngControl() {
+        return (this._ngControl ??= new InteropNgControl(() => this.state()));
     }
-    /** Gets the child fields of this field. */
-    children() {
-        return this.childrenMap()?.values() ?? [];
+    /** The ControlValueAccessor for the host component. */
+    get cva() {
+        return this.cvaArray?.[0] ?? this._ngControl?.valueAccessor ?? undefined;
     }
-    /** Retrieve a child `FieldNode` of this node by property key. */
-    getChild(key) {
-        const map = this.childrenMap();
-        const value = this.value();
-        if (!map || !isObject(value)) {
-            return undefined;
+    /** Initializes state synchronization between the field and the host UI control. */
+    initialize() {
+        this.initialized = true;
+        const injector = this.injector;
+        const cmp = privateGetComponentInstance(injector);
+        // If component has a `control` input, we assume that it will handle binding the field to the
+        // appropriate native/custom control in its template, so we do not attempt to bind any inputs on
+        // this component.
+        if (cmp && isShadowedControlComponent(cmp)) {
+            return;
         }
-        if (isArray(value)) {
-            const childValue = value[key];
-            if (isObject(childValue) && childValue.hasOwnProperty(this.identitySymbol)) {
-                // For arrays, we want to use the tracking identity of the value instead of the raw property
-                // as our index into the `childrenMap`.
-                key = childValue[this.identitySymbol];
-            }
+        if (cmp && isFormUiControl(cmp)) {
+            // If we're binding to a component that follows the standard form ui control contract,
+            // set up state synchronization based on the contract.
+            this.setupCustomUiControl(cmp);
         }
-        return map.get((typeof key === 'number' ? key.toString() : key));
-    }
-    /** Destroys the field when it is no longer needed. */
-    destroy() {
-        this.injector.destroy();
-    }
-}
-/** The structural component of a `FieldNode` that is the root of its field tree. */
-class RootFieldNodeStructure extends FieldNodeStructure {
-    node;
-    fieldManager;
-    value;
-    get parent() {
-        return undefined;
-    }
-    get root() {
-        return this.node;
-    }
-    get pathKeys() {
-        return ROOT_PATH_KEYS;
-    }
-    get keyInParent() {
-        return ROOT_KEY_IN_PARENT;
-    }
-    childrenMap;
-    /**
-     * Creates the structure for the root node of a field tree.
-     *
-     * @param node The full field node that this structure belongs to
-     * @param pathNode The path corresponding to this node in the schema
-     * @param logic The logic to apply to this field
-     * @param fieldManager The field manager for this field
-     * @param value The value signal for this field
-     * @param adapter Adapter that knows how to create new fields and appropriate state.
-     * @param createChildNode A factory function to create child nodes for this field.
-     */
-    constructor(
-    /** The full field node that corresponds to this structure. */
-    node, pathNode, logic, fieldManager, value, adapter, createChildNode) {
-        super(logic);
-        this.node = node;
-        this.fieldManager = fieldManager;
-        this.value = value;
-        this.childrenMap = makeChildrenMapSignal(node, value, this.identitySymbol, pathNode, logic, adapter, createChildNode);
-    }
-}
-/** The structural component of a child `FieldNode` within a field tree. */
-class ChildFieldNodeStructure extends FieldNodeStructure {
-    parent;
-    root;
-    pathKeys;
-    keyInParent;
-    value;
-    childrenMap;
-    get fieldManager() {
-        return this.root.structure.fieldManager;
+        else if (this.cva !== undefined) {
+            // If we're binding to a component that doesn't follow the standard contract, but provides a
+            // control value accessor, set up state synchronization based on th CVA.
+            this.setupControlValueAccessor(this.cva);
+        }
+        else if (this.el.nativeElement instanceof HTMLInputElement ||
+            this.el.nativeElement instanceof HTMLTextAreaElement ||
+            this.el.nativeElement instanceof HTMLSelectElement) {
+            // If we're binding to a native html input, set up state synchronization with its native
+            // properties / attributes.
+            this.setupNativeInput(this.el.nativeElement);
+        }
+        else {
+            throw new Error(`Unhandled control?`);
+        }
+        // Register this control on the field it is currently bound to. We do this at the end of
+        // initialization so that it only runs if we are actually syncing with this control
+        // (as opposed to just passing the field through to its `control` input).
+        effect((onCleanup) => {
+            const fieldNode = this.state();
+            fieldNode.nodeState.controls.update((controls) => [...controls, this]);
+            onCleanup(() => {
+                fieldNode.nodeState.controls.update((controls) => controls.filter((c) => c !== this));
+            });
+        }, { injector: this.injector });
     }
     /**
-     * Creates the structure for a child field node in a field tree.
-     *
-     * @param node The full field node that this structure belongs to
-     * @param pathNode The path corresponding to this node in the schema
-     * @param logic The logic to apply to this field
-     * @param parent The parent field node for this node
-     * @param identityInParent The identity used to track this field in its parent
-     * @param initialKeyInParent The key of this field in its parent at the time of creation
-     * @param adapter Adapter that knows how to create new fields and appropriate state.
-     * @param createChildNode A factory function to create child nodes for this field.
+     * Set up state synchronization between the field and a native <input>, <textarea>, or <select>.
+     */
+    setupNativeInput(input) {
+        const inputType = input instanceof HTMLTextAreaElement
+            ? 'text'
+            : input instanceof HTMLSelectElement
+                ? 'select'
+                : input.type;
+        input.addEventListener('input', () => {
+            switch (inputType) {
+                case 'checkbox':
+                    this.state().value.set(input.checked);
+                    break;
+                case 'radio':
+                    // The `input` event only fires when a radio button becomes selected, so write its `value`
+                    // into the state.
+                    this.state().value.set(input.value);
+                    break;
+                case 'number':
+                case 'range':
+                case 'datetime-local':
+                    // We can read a `number` or a `string` from this input type.
+                    // Prefer whichever is consistent with the current type.
+                    if (typeof this.state().value() === 'number') {
+                        this.state().value.set(input.valueAsNumber);
+                    }
+                    else {
+                        this.state().value.set(input.value);
+                    }
+                    break;
+                case 'date':
+                case 'month':
+                case 'week':
+                case 'time':
+                    // We can read a `Date | null` or a `number` or a `string` from this input type.
+                    // Prefer whichever is consistent with the current type.
+                    if (isDateOrNull(this.state().value())) {
+                        this.state().value.set(input.valueAsDate);
+                    }
+                    else if (typeof this.state().value() === 'number') {
+                        this.state().value.set(input.valueAsNumber);
+                    }
+                    else {
+                        this.state().value.set(input.value);
+                    }
+                    break;
+                default:
+                    this.state().value.set(input.value);
+                    break;
+            }
+            this.state().markAsDirty();
+        });
+        input.addEventListener('blur', () => this.state().markAsTouched());
+        this.maybeSynchronize(() => this.state().readonly(), this.withBooleanAttribute(input, 'readonly'));
+        // TODO: consider making a global configuration option for using aria-disabled instead.
+        this.maybeSynchronize(() => this.state().disabled(), this.withBooleanAttribute(input, 'disabled'));
+        this.maybeSynchronize(() => this.state().name(), this.withAttribute(input, 'name'));
+        this.maybeSynchronize(this.propertySource(REQUIRED), this.withBooleanAttribute(input, 'required'));
+        this.maybeSynchronize(this.propertySource(MIN), this.withAttribute(input, 'min'));
+        this.maybeSynchronize(this.propertySource(MIN_LENGTH), this.withAttribute(input, 'minLength'));
+        this.maybeSynchronize(this.propertySource(MAX), this.withAttribute(input, 'max'));
+        this.maybeSynchronize(this.propertySource(MAX_LENGTH), this.withAttribute(input, 'maxLength'));
+        switch (inputType) {
+            case 'checkbox':
+                this.maybeSynchronize(() => this.state().value(), (value) => (input.checked = value));
+                break;
+            case 'radio':
+                this.maybeSynchronize(() => this.state().value(), (value) => {
+                    // Although HTML behavior is to clear the input already, we do this just in case.
+                    // It seems like it might be necessary in certain environments (e.g. Domino).
+                    input.checked = input.value === value;
+                });
+                break;
+            case 'select':
+                this.maybeSynchronize(() => this.state().value(), (value) => {
+                    // A select will not take a value unil the value's option has rendered.
+                    afterNextRender(() => (input.value = value), { injector: this.injector });
+                });
+                break;
+            case 'number':
+            case 'range':
+            case 'datetime-local':
+                // This input type can receive a `number` or a `string`.
+                this.maybeSynchronize(() => this.state().value(), (value) => {
+                    if (typeof value === 'number') {
+                        input.valueAsNumber = value;
+                    }
+                    else {
+                        input.value = value;
+                    }
+                });
+                break;
+            case 'date':
+            case 'month':
+            case 'week':
+            case 'time':
+                // This input type can receive a `Date | null` or a `number` or a `string`.
+                this.maybeSynchronize(() => this.state().value(), (value) => {
+                    if (isDateOrNull(value)) {
+                        input.valueAsDate = value;
+                    }
+                    else if (typeof value === 'number') {
+                        input.valueAsNumber = value;
+                    }
+                    else {
+                        input.value = value;
+                    }
+                });
+                break;
+            default:
+                this.maybeSynchronize(() => this.state().value(), (value) => {
+                    input.value = value;
+                });
+                break;
+        }
+    }
+    /** Set up state synchronization between the field and a ControlValueAccessor. */
+    setupControlValueAccessor(cva) {
+        cva.registerOnChange((value) => this.state().value.set(value));
+        cva.registerOnTouched(() => this.state().markAsTouched());
+        this.maybeSynchronize(() => this.state().value(), (value) => cva.writeValue(value));
+        if (cva.setDisabledState) {
+            this.maybeSynchronize(() => this.state().disabled(), (value) => cva.setDisabledState(value));
+        }
+        cva.writeValue(this.state().value());
+        cva.setDisabledState?.(this.state().disabled());
+    }
+    /** Set up state synchronization between the field and a FormUiControl. */
+    setupCustomUiControl(cmp) {
+        // Handle the property side of the model binding. How we do this depends on the shape of the
+        // component. There are 2 options:
+        // * it provides a `value` model (most controls that edit a single value)
+        // * it provides a `checked` model with no `value` signal (custom checkbox)
+        let cleanupValue;
+        if (isFormValueControl(cmp)) {
+            // <custom-input [(value)]="state().value">
+            this.maybeSynchronize(() => this.state().value(), withInput(cmp.value));
+            cleanupValue = cmp.value.subscribe((newValue) => this.state().value.set(newValue));
+        }
+        else if (isFormCheckboxControl(cmp)) {
+            // <custom-checkbox [(checked)]="state().value" />
+            this.maybeSynchronize(() => this.state().value(), withInput(cmp.checked));
+            cleanupValue = cmp.checked.subscribe((newValue) => this.state().value.set(newValue));
+        }
+        else {
+            throw new Error(`Unknown custom control subtype`);
+        }
+        this.maybeSynchronize(() => this.state().name(), withInput(cmp.name));
+        this.maybeSynchronize(() => this.state().disabled(), withInput(cmp.disabled));
+        this.maybeSynchronize(() => this.state().disabledReasons(), withInput(cmp.disabledReasons));
+        this.maybeSynchronize(() => this.state().readonly(), withInput(cmp.readonly));
+        this.maybeSynchronize(() => this.state().hidden(), withInput(cmp.hidden));
+        this.maybeSynchronize(() => this.state().errors(), withInput(cmp.errors));
+        if (privateIsModelInput(cmp.touched) || privateIsSignalInput(cmp.touched)) {
+            this.maybeSynchronize(() => this.state().touched(), withInput(cmp.touched));
+        }
+        this.maybeSynchronize(() => this.state().dirty(), withInput(cmp.dirty));
+        this.maybeSynchronize(() => this.state().invalid(), withInput(cmp.invalid));
+        this.maybeSynchronize(() => this.state().pending(), withInput(cmp.pending));
+        this.maybeSynchronize(this.propertySource(REQUIRED), withInput(cmp.required));
+        this.maybeSynchronize(this.propertySource(MIN), withInput(cmp.min));
+        this.maybeSynchronize(this.propertySource(MIN_LENGTH), withInput(cmp.minLength));
+        this.maybeSynchronize(this.propertySource(MAX), withInput(cmp.max));
+        this.maybeSynchronize(this.propertySource(MAX_LENGTH), withInput(cmp.maxLength));
+        this.maybeSynchronize(this.propertySource(PATTERN), withInput(cmp.pattern));
+        let cleanupTouch;
+        let cleanupDefaultTouch;
+        if (privateIsModelInput(cmp.touched) || isOutputRef(cmp.touched)) {
+            cleanupTouch = cmp.touched.subscribe(() => this.state().markAsTouched());
+        }
+        else {
+            // If the component did not give us a touch event stream, use the standard touch logic,
+            // marking it touched when the focus moves from inside the host element to outside.
+            const listener = (event) => {
+                const newActiveEl = event.relatedTarget;
+                if (!this.el.nativeElement.contains(newActiveEl)) {
+                    this.state().markAsTouched();
+                }
+            };
+            this.el.nativeElement.addEventListener('focusout', listener);
+            cleanupDefaultTouch = () => this.el.nativeElement.removeEventListener('focusout', listener);
+        }
+        // Cleanup for output binding subscriptions:
+        this.injector.get(DestroyRef).onDestroy(() => {
+            cleanupValue?.unsubscribe();
+            cleanupTouch?.unsubscribe();
+            cleanupDefaultTouch?.();
+        });
+    }
+    /** Synchronize a value from a reactive source to a given sink. */
+    maybeSynchronize(source, sink) {
+        if (!sink) {
+            return undefined;
+        }
+        const ref = effect(() => {
+            const value = source();
+            untracked(() => sink(value));
+        }, ...(ngDevMode ? [{ debugName: "ref", injector: this.injector }] : [{ injector: this.injector }]));
+        // Run the effect immediately to ensure sinks which are required inputs are set before they can
+        // be observed. See the note on `_field` for more details.
+        privateRunEffect(ref);
+    }
+    /** Creates a reactive value source by reading the given AggregateProperty from the field. */
+    propertySource(key) {
+        const metaSource = computed(() => this.state().hasProperty(key) ? this.state().property(key) : key.getInitial, ...(ngDevMode ? [{ debugName: "metaSource" }] : []));
+        return () => metaSource()?.();
+    }
+    /** Creates a (non-boolean) value sync that writes the given attribute of the given element. */
+    withAttribute(element, attribute) {
+        return (value) => {
+            if (value !== undefined) {
+                this.renderer.setAttribute(element, attribute, value.toString());
+            }
+            else {
+                this.renderer.removeAttribute(element, attribute);
+            }
+        };
+    }
+    /** Creates a boolean value sync that writes the given attribute of the given element. */
+    withBooleanAttribute(element, attribute) {
+        return (value) => {
+            if (value) {
+                this.renderer.setAttribute(element, attribute, '');
+            }
+            else {
+                this.renderer.removeAttribute(element, attribute);
+            }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.4", ngImport: i0, type: Control, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.4", type: Control, isStandalone: true, selector: "[control]", inputs: { _field: ["control", "_field"] }, providers: [
+            {
+                provide: NgControl,
+                useFactory: () => inject(Control).ngControl,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.4", ngImport: i0, type: Control, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[control]',
+                    providers: [
+                        {
+                            provide: NgControl,
+                            useFactory: () => inject(Control).ngControl,
+                        },
+                    ],
+                }]
+        }], propDecorators: { _field: [{
+                type: Input,
+                args: [{ required: true, alias: 'control' }]
+            }] } });
+/** Creates a value sync from an input signal. */
+function withInput(input) {
+    return input ? (value) => privateSetComponentInput(input, value) : undefined;
+}
+/**
+ * Checks whether the given component matches the contract for either FormValueControl or
+ * FormCheckboxControl.
+ */
+function isFormUiControl(cmp) {
+    const castCmp = cmp;
+    return ((isFormValueControl(castCmp) || isFormCheckboxControl(castCmp)) &&
+        (castCmp.readonly === undefined || privateIsSignalInput(castCmp.readonly)) &&
+        (castCmp.disabled === undefined || privateIsSignalInput(castCmp.disabled)) &&
+        (castCmp.disabledReasons === undefined || privateIsSignalInput(castCmp.disabledReasons)) &&
+        (castCmp.errors === undefined || privateIsSignalInput(castCmp.errors)) &&
+        (castCmp.invalid === undefined || privateIsSignalInput(castCmp.invalid)) &&
+        (castCmp.pending === undefined || privateIsSignalInput(castCmp.pending)) &&
+        (castCmp.touched === undefined ||
+            privateIsModelInput(castCmp.touched) ||
+            privateIsSignalInput(castCmp.touched) ||
+            isOutputRef(castCmp.touched)) &&
+        (castCmp.dirty === undefined || privateIsSignalInput(castCmp.dirty)) &&
+        (castCmp.min === undefined || privateIsSignalInput(castCmp.min)) &&
+        (castCmp.minLength === undefined || privateIsSignalInput(castCmp.minLength)) &&
+        (castCmp.max === undefined || privateIsSignalInput(castCmp.max)) &&
+        (castCmp.maxLength === undefined || privateIsSignalInput(castCmp.maxLength)));
+}
+/** Checks whether the given FormUiControl is a FormValueControl. */
+function isFormValueControl(cmp) {
+    return privateIsModelInput(cmp.value);
+}
+/** Checks whether the given FormUiControl is a FormCheckboxControl. */
+function isFormCheckboxControl(cmp) {
+    return (privateIsModelInput(cmp.checked) &&
+        cmp.value === undefined);
+}
+/** Checks whether the given component has an input called `control`. */
+function isShadowedControlComponent(cmp) {
+    const mirror = reflectComponentType(cmp.constructor);
+    return mirror?.inputs.some((input) => input.templateName === 'control') ?? false;
+}
+/** Checks whether the given object is an output ref. */
+function isOutputRef(value) {
+    return value instanceof OutputEmitterRef || value instanceof EventEmitter;
+}
+/** Checks if a given value is a Date or null */
+function isDateOrNull(value) {
+    return value === null || value instanceof Date;
+}
+
+/**
+ * `FieldContext` implementation, backed by a `FieldNode`.
+ */
+class FieldNodeContext {
+    node;
+    /**
+     * Cache of paths that have been resolved for this context.
+     *
+     * For each resolved path we keep track of a signal of field that it maps to rather than a static
+     * field, since it theoretically could change. In practice for the current system it should not
+     * actually change, as they only place we currently track fields moving within the parent
+     * structure is for arrays, and paths do not currently support array indexing.
+     */
+    cache = new WeakMap();
+    constructor(
+    /** The field node this context corresponds to. */
+    node) {
+        this.node = node;
+    }
+    /**
+     * Resolves a target path relative to this context.
+     * @param target The path to resolve
+     * @returns The field corresponding to the target path.
+     */
+    resolve(target) {
+        if (!this.cache.has(target)) {
+            const resolver = computed(() => {
+                const targetPathNode = FieldPathNode.unwrapFieldPath(target);
+                // First, find the field where the root our target path was merged in.
+                // We determine this by walking up the field tree from the current field and looking for
+                // the place where the LogicNodeBuilder from the target path's root was merged in.
+                // We always make sure to walk up at least as far as the depth of the path we were bound to.
+                // This ensures that we do not accidentally match on the wrong application of a recursively
+                // applied schema.
+                let field = this.node;
+                let stepsRemaining = getBoundPathDepth();
+                while (stepsRemaining > 0 || !field.structure.logic.hasLogic(targetPathNode.root.logic)) {
+                    stepsRemaining--;
+                    field = field.structure.parent;
+                    if (field === undefined) {
+                        throw new Error('Path is not part of this field tree.');
+                    }
+                }
+                // Now, we can navigate to the target field using the relative path in the target path node
+                // to traverse down from the field we just found.
+                for (let key of targetPathNode.keys) {
+                    field = field.structure.getChild(key);
+                    if (field === undefined) {
+                        throw new Error(`Cannot resolve path .${targetPathNode.keys.join('.')} relative to field ${[
+                            '<root>',
+                            ...this.node.structure.pathKeys(),
+                        ].join('.')}.`);
+                    }
+                }
+                return field.fieldProxy;
+            }, ...(ngDevMode ? [{ debugName: "resolver" }] : []));
+            this.cache.set(target, resolver);
+        }
+        return this.cache.get(target)();
+    }
+    get field() {
+        return this.node.fieldProxy;
+    }
+    get state() {
+        return this.node;
+    }
+    get value() {
+        return this.node.structure.value;
+    }
+    get key() {
+        return this.node.structure.keyInParent;
+    }
+    index = computed(() => {
+        // Attempt to read the key first, this will throw an error if we're on a root field.
+        const key = this.key();
+        // Assert that the parent is actually an array.
+        if (!isArray(untracked(this.node.structure.parent.value))) {
+            throw new Error(`RuntimeError: cannot access index, parent field is not an array`);
+        }
+        // Return the key as a number if we are indeed inside an array field.
+        return Number(key);
+    }, ...(ngDevMode ? [{ debugName: "index" }] : []));
+    fieldOf = (p) => this.resolve(p);
+    stateOf = (p) => this.resolve(p)();
+    valueOf = (p) => this.resolve(p)().value();
+}
+
+/**
+ * Tracks custom properties associated with a `FieldNode`.
+ */
+class FieldPropertyState {
+    node;
+    /** A map of all `Property` and `AggregateProperty` that have been defined for this field. */
+    properties = new Map();
+    constructor(node) {
+        this.node = node;
+        // Field nodes (and thus their property state) are created in a linkedSignal in order to mirror
+        // the structure of the model data. We need to run the property factories untracked so that they
+        // do not cause recomputation of the linkedSignal.
+        untracked(() => 
+        // Property factories are run in the form's injection context so they can create resources
+        // and inject DI dependencies.
+        runInInjectionContext(this.node.structure.injector, () => {
+            for (const [key, factory] of this.node.logicNode.logic.getPropertyFactoryEntries()) {
+                this.properties.set(key, factory(this.node.context));
+            }
+        }));
+    }
+    /** Gets the value of a `Property` or `AggregateProperty` for the field. */
+    get(prop) {
+        if (prop instanceof Property) {
+            return this.properties.get(prop);
+        }
+        if (!this.properties.has(prop)) {
+            const logic = this.node.logicNode.logic.getAggregateProperty(prop);
+            const result = computed(() => logic.compute(this.node.context), ...(ngDevMode ? [{ debugName: "result" }] : []));
+            this.properties.set(prop, result);
+        }
+        return this.properties.get(prop);
+    }
+    /**
+     * Checks whether the current property state has the given property.
+     * @param prop
+     * @returns
+     */
+    has(prop) {
+        if (prop instanceof AggregateProperty) {
+            // For aggregate properties, they get added to the map lazily, on first access, so we can't
+            // rely on checking presence in the properties map. Instead we check if there is any logic for
+            // the given property.
+            return this.node.logicNode.logic.hasAggregateProperty(prop);
+        }
+        else {
+            // Non-aggregate proeprties get added to our properties map on construction, so we can just
+            // refer to their presence in the map.
+            return this.properties.has(prop);
+        }
+    }
+}
+
+/**
+ * Proxy handler which implements `Field<T>` on top of `FieldNode`.
+ */
+const FIELD_PROXY_HANDLER = {
+    get(getTgt, p) {
+        const tgt = getTgt();
+        // First, check whether the requested property is a defined child node of this node.
+        const child = tgt.structure.getChild(p);
+        if (child !== undefined) {
+            // If so, return the child node's `Field` proxy, allowing the developer to continue navigating
+            // the form structure.
+            return child.fieldProxy;
+        }
+        // Otherwise, we need to consider whether the properties they're accessing are related to array
+        // iteration. We're specifically interested in `length`, but we only want to pass this through
+        // if the value is actually an array.
+        //
+        // We untrack the value here to avoid spurious reactive notifications. In reality, we've already
+        // incurred a dependency on the value via `tgt.getChild()` above.
+        const value = untracked(tgt.value);
+        if (isArray(value)) {
+            // Allow access to the length for field arrays, it should be the same as the length of the data.
+            if (p === 'length') {
+                return tgt.value().length;
+            }
+            // Allow access to the iterator. This allows the user to spread the field array into a
+            // standard array in order to call methods like `filter`, `map`, etc.
+            if (p === Symbol.iterator) {
+                return Array.prototype[p];
+            }
+            // Note: We can consider supporting additional array methods if we want in the future,
+            // but they should be thoroughly tested. Just forwarding the method directly from the
+            // `Array` prototype results in broken behavior for some methods like `map`.
+        }
+        // Otherwise, this property doesn't exist.
+        return undefined;
+    },
+};
+
+/**
+ * Creates a writable signal for a specific property on a source writeable signal.
+ * @param source A writeable signal to derive from
+ * @param prop A signal of a property key of the source value
+ * @returns A writeable signal for the given property of the source value.
+ * @template S The source value type
+ * @template K The key type for S
+ */
+function deepSignal(source, prop) {
+    // Memoize the property.
+    const read = computed(() => source()[prop()]);
+    read[SIGNAL] = source[SIGNAL];
+    read.set = (value) => {
+        source.update((current) => valueForWrite(current, value, prop()));
+    };
+    read.update = (fn) => {
+        read.set(fn(untracked(read)));
+    };
+    read.asReadonly = () => read;
+    return read;
+}
+/**
+ * Gets an updated root value to use when setting a value on a deepSignal with the given path.
+ * @param sourceValue The current value of the deepSignal's source.
+ * @param newPropValue The value being written to the deepSignal's property
+ * @param prop The deepSignal's property key
+ * @returns An updated value for the deepSignal's source
+ */
+function valueForWrite(sourceValue, newPropValue, prop) {
+    if (isArray(sourceValue)) {
+        const newValue = [...sourceValue];
+        newValue[prop] = newPropValue;
+        return newValue;
+    }
+    else {
+        return { ...sourceValue, [prop]: newPropValue };
+    }
+}
+
+/** Structural component of a `FieldNode` which tracks its path, parent, and children. */
+class FieldNodeStructure {
+    logic;
+    /** Added to array elements for tracking purposes. */
+    // TODO: given that we don't ever let a field move between parents, is it safe to just extract
+    // this to a shared symbol for all fields, rather than having a separate one per parent?
+    identitySymbol = Symbol();
+    /** Lazily initialized injector. Do not access directly, access via `injector` getter instead. */
+    _injector = undefined;
+    /** Lazily initialized injector. */
+    get injector() {
+        this._injector ??= Injector.create({
+            providers: [],
+            parent: this.fieldManager.injector,
+        });
+        return this._injector;
+    }
+    constructor(
+    /** The logic to apply to this field. */
+    logic) {
+        this.logic = logic;
+    }
+    /** Gets the child fields of this field. */
+    children() {
+        return this.childrenMap()?.values() ?? [];
+    }
+    /** Retrieve a child `FieldNode` of this node by property key. */
+    getChild(key) {
+        const map = this.childrenMap();
+        const value = this.value();
+        if (!map || !isObject(value)) {
+            return undefined;
+        }
+        if (isArray(value)) {
+            const childValue = value[key];
+            if (isObject(childValue) && childValue.hasOwnProperty(this.identitySymbol)) {
+                // For arrays, we want to use the tracking identity of the value instead of the raw property
+                // as our index into the `childrenMap`.
+                key = childValue[this.identitySymbol];
+            }
+        }
+        return map.get((typeof key === 'number' ? key.toString() : key));
+    }
+    /** Destroys the field when it is no longer needed. */
+    destroy() {
+        this.injector.destroy();
+    }
+}
+/** The structural component of a `FieldNode` that is the root of its field tree. */
+class RootFieldNodeStructure extends FieldNodeStructure {
+    node;
+    fieldManager;
+    value;
+    get parent() {
+        return undefined;
+    }
+    get root() {
+        return this.node;
+    }
+    get pathKeys() {
+        return ROOT_PATH_KEYS;
+    }
+    get keyInParent() {
+        return ROOT_KEY_IN_PARENT;
+    }
+    childrenMap;
+    /**
+     * Creates the structure for the root node of a field tree.
+     *
+     * @param node The full field node that this structure belongs to
+     * @param pathNode The path corresponding to this node in the schema
+     * @param logic The logic to apply to this field
+     * @param fieldManager The field manager for this field
+     * @param value The value signal for this field
+     * @param adapter Adapter that knows how to create new fields and appropriate state.
+     * @param createChildNode A factory function to create child nodes for this field.
+     */
+    constructor(
+    /** The full field node that corresponds to this structure. */
+    node, pathNode, logic, fieldManager, value, adapter, createChildNode) {
+        super(logic);
+        this.node = node;
+        this.fieldManager = fieldManager;
+        this.value = value;
+        this.childrenMap = makeChildrenMapSignal(node, value, this.identitySymbol, pathNode, logic, adapter, createChildNode);
+    }
+}
+/** The structural component of a child `FieldNode` within a field tree. */
+class ChildFieldNodeStructure extends FieldNodeStructure {
+    parent;
+    root;
+    pathKeys;
+    keyInParent;
+    value;
+    childrenMap;
+    get fieldManager() {
+        return this.root.structure.fieldManager;
+    }
+    /**
+     * Creates the structure for a child field node in a field tree.
+     *
+     * @param node The full field node that this structure belongs to
+     * @param pathNode The path corresponding to this node in the schema
+     * @param logic The logic to apply to this field
+     * @param parent The parent field node for this node
+     * @param identityInParent The identity used to track this field in its parent
+     * @param initialKeyInParent The key of this field in its parent at the time of creation
+     * @param adapter Adapter that knows how to create new fields and appropriate state.
+     * @param createChildNode A factory function to create child nodes for this field.
      */
     constructor(node, pathNode, logic, parent, identityInParent, initialKeyInParent, adapter, createChildNode) {
         super(logic);
@@ -2051,14 +2619,12 @@ class FieldNodeState {
      * Marks this specific field as touched.
      */
     markAsTouched() {
-        // TODO: should this be noop for fields that are hidden/disabled/readonly
         this.selfTouched.set(true);
     }
     /**
      * Marks this specific field as dirty.
      */
     markAsDirty() {
-        // TODO: should this be noop for fields that are hidden/disabled/readonly
         this.selfDirty.set(true);
     }
     /**
@@ -2082,20 +2648,24 @@ class FieldNodeState {
      * Whether this field is considered dirty.
      *
      * A field is considered dirty if one of the following is true:
-     *  - It was directly dirtied
+     *  - It was directly dirtied and is interactive
      *  - One of its children is considered dirty
      */
     dirty = computed(() => {
-        return reduceChildren(this.node, this.selfDirty(), (child, value) => value || child.nodeState.dirty(), shortCircuitTrue);
+        const selfDirtyValue = this.selfDirty() && !this.isNonInteractive();
+        return reduceChildren(this.node, selfDirtyValue, (child, value) => value || child.nodeState.dirty(), shortCircuitTrue);
     }, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
     /**
      * Whether this field is considered touched.
      *
      * A field is considered touched if one of the following is true:
-     *  - It was directly touched
+     *  - It was directly touched and is interactive
      *  - One of its children is considered touched
      */
-    touched = computed(() => reduceChildren(this.node, this.selfTouched(), (child, value) => value || child.nodeState.touched(), shortCircuitTrue), ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    touched = computed(() => {
+        const selfTouchedValue = this.selfTouched() && !this.isNonInteractive();
+        return reduceChildren(this.node, selfTouchedValue, (child, value) => value || child.nodeState.touched(), shortCircuitTrue);
+    }, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     /**
      * The reasons for this field's disablement. This includes disabled reasons for any parent field
      * that may have been disabled, indirectly causing this field to be disabled as well.
@@ -2141,6 +2711,14 @@ class FieldNodeState {
         }
         return `${parent.name()}.${this.node.structure.keyInParent()}`;
     }, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /** Whether this field is considered non-interactive.
+     *
+     * A field is considered non-interactive if one of the following is true:
+     * - It is hidden
+     * - It is disabled
+     * - It is readonly
+     */
+    isNonInteractive = computed(() => this.hidden() || this.disabled() || this.readonly(), ...(ngDevMode ? [{ debugName: "isNonInteractive" }] : []));
 }
 
 /**
@@ -2321,6 +2899,8 @@ function form(...args) {
  * @param schema A schema for an element of the array, or function that binds logic to an
  * element of the array.
  * @template TValue The data type of the item field to apply the schema to.
+ *
+ * @experimental 21.0.0
  */
 function applyEach(path, schema) {
     assertPathIsCurrent(path);
@@ -2344,6 +2924,8 @@ function applyEach(path, schema) {
  * @param path The target path to apply the schema to.
  * @param schema The schema to apply to the property
  * @template TValue The data type of the field to apply the schema to.
+ *
+ * @experimental 21.0.0
  */
 function apply(path, schema) {
     assertPathIsCurrent(path);
@@ -2357,6 +2939,8 @@ function apply(path, schema) {
  * @param logic A `LogicFn<T, boolean>` that returns `true` when the schema should be applied.
  * @param schema The schema to apply to the field when the `logic` function returns `true`.
  * @template TValue The data type of the field to apply the schema to.
+ *
+ * @experimental 21.0.0
  */
 function applyWhen(path, logic, schema) {
     assertPathIsCurrent(path);
@@ -2396,6 +2980,8 @@ function applyWhenValue(path, predicate, schema) {
  * @param action An asynchronous action used to submit the field. The action may return server
  * errors.
  * @template TValue The data type of the field being submitted.
+ *
+ * @experimental 21.0.0
  */
 async function submit(form, action) {
     const node = form();
@@ -2443,6 +3029,8 @@ function setServerErrors(submittedField, errors) {
  * @param fn A **non-reactive** function that sets up reactive logic rules for the form.
  * @returns A schema object that implements the given logic.
  * @template TValue The value type of a `Field` that this schema binds to.
+ *
+ * @experimental 21.0.0
  */
 function schema(fn) {
     return SchemaImpl.create(fn);
@@ -2484,6 +3072,8 @@ function customError(obj) {
 }
 /**
  * A custom error that may contain additional properties
+ *
+ * @experimental 21.0.0
  */
 class CustomValidationError {
     /** Brand the class to avoid Typescript structural matching */
@@ -2503,6 +3093,8 @@ class CustomValidationError {
 /**
  * Internal version of `NgValidationError`, we create this separately so we can change its type on
  * the exported version to a type union of the possible sub-classes.
+ *
+ * @experimental 21.0.0
  */
 class _NgValidationError {
     /** Brand the class to avoid Typescript structural matching */
@@ -2521,12 +3113,16 @@ class _NgValidationError {
 }
 /**
  * An error used to indicate that a required field is empty.
+ *
+ * @experimental 21.0.0
  */
 class RequiredValidationError extends _NgValidationError {
     kind = 'required';
 }
 /**
  * An error used to indicate that a value is lower than the minimum allowed.
+ *
+ * @experimental 21.0.0
  */
 class MinValidationError extends _NgValidationError {
     min;
@@ -2538,6 +3134,8 @@ class MinValidationError extends _NgValidationError {
 }
 /**
  * An error used to indicate that a value is higher than the maximum allowed.
+ *
+ * @experimental 21.0.0
  */
 class MaxValidationError extends _NgValidationError {
     max;
@@ -2549,6 +3147,8 @@ class MaxValidationError extends _NgValidationError {
 }
 /**
  * An error used to indicate that a value is shorter than the minimum allowed length.
+ *
+ * @experimental 21.0.0
  */
 class MinLengthValidationError extends _NgValidationError {
     minLength;
@@ -2560,6 +3160,8 @@ class MinLengthValidationError extends _NgValidationError {
 }
 /**
  * An error used to indicate that a value is longer than the maximum allowed length.
+ *
+ * @experimental 21.0.0
  */
 class MaxLengthValidationError extends _NgValidationError {
     maxLength;
@@ -2571,6 +3173,8 @@ class MaxLengthValidationError extends _NgValidationError {
 }
 /**
  * An error used to indicate that a value does not match the required pattern.
+ *
+ * @experimental 21.0.0
  */
 class PatternValidationError extends _NgValidationError {
     pattern;
@@ -2582,12 +3186,16 @@ class PatternValidationError extends _NgValidationError {
 }
 /**
  * An error used to indicate that a value is not a valid email.
+ *
+ * @experimental 21.0.0
  */
 class EmailValidationError extends _NgValidationError {
     kind = 'email';
 }
 /**
  * An error used to indicate an issue validating against a standard schema.
+ *
+ * @experimental 21.0.0
  */
 class StandardSchemaValidationError extends _NgValidationError {
     issue;
@@ -2618,6 +3226,8 @@ class StandardSchemaValidationError extends _NgValidationError {
  *   }
  * }
  * ```
+ *
+ * @experimental 21.0.0
  */
 const NgValidationError = _NgValidationError;
 
@@ -2632,254 +3242,75 @@ function getLengthOrSize(value) {
  *
  * @param opt The option from BaseValidatorConfig.
  * @param ctx The current FieldContext.
- * @returns The value for the option.
- */
-function getOption(opt, ctx) {
-    return opt instanceof Function ? opt(ctx) : opt;
-}
-/**
- * Checks if the given value is considered empty. Empty values are: null, undefined, '', false, NaN.
- */
-function isEmpty(value) {
-    if (typeof value === 'number') {
-        return isNaN(value);
-    }
-    return value === '' || value === false || value == null;
-}
-
-/**
- * A regular expression that matches valid e-mail addresses.
- *
- * At a high level, this regexp matches e-mail addresses of the format `local-part@tld`, where:
- * - `local-part` consists of one or more of the allowed characters (alphanumeric and some
- *   punctuation symbols).
- * - `local-part` cannot begin or end with a period (`.`).
- * - `local-part` cannot be longer than 64 characters.
- * - `tld` consists of one or more `labels` separated by periods (`.`). For example `localhost` or
- *   `foo.com`.
- * - A `label` consists of one or more of the allowed characters (alphanumeric, dashes (`-`) and
- *   periods (`.`)).
- * - A `label` cannot begin or end with a dash (`-`) or a period (`.`).
- * - A `label` cannot be longer than 63 characters.
- * - The whole address cannot be longer than 254 characters.
- *
- * ## Implementation background
- *
- * This regexp was ported over from AngularJS (see there for git history):
- * https://github.com/angular/angular.js/blob/c133ef836/src/ng/directive/input.js#L27
- * It is based on the
- * [WHATWG version](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with
- * some enhancements to incorporate more RFC rules (such as rules related to domain names and the
- * lengths of different parts of the address). The main differences from the WHATWG version are:
- *   - Disallow `local-part` to begin or end with a period (`.`).
- *   - Disallow `local-part` length to exceed 64 characters.
- *   - Disallow total address length to exceed 254 characters.
- *
- * See [this commit](https://github.com/angular/angular.js/commit/f3f5cf72e) for more details.
- */
-const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-/**
- * Binds a validator to the given path that requires the value to match the standard email format.
- * This function can only be called on string paths.
- *
- * @param path Path of the field to validate
- * @param config Optional, allows providing any of the following options:
- *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.email()`
- *    or a function that receives the `FieldContext` and returns custom validation error(s).
- * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
- */
-function email(path, config) {
-    validate(path, (ctx) => {
-        if (isEmpty(ctx.value())) {
-            return undefined;
-        }
-        if (!EMAIL_REGEXP.test(ctx.value())) {
-            if (config?.error) {
-                return getOption(config.error, ctx);
-            }
-            else {
-                return emailError({ message: getOption(config?.message, ctx) });
-            }
-        }
-        return undefined;
-    });
-}
-
-/**
- * Binds a validator to the given path that requires the value to be less than or equal to the
- * given `maxValue`.
- * This function can only be called on number paths.
- * In addition to binding a validator, this function adds `MAX` property to the field.
- *
- * @param path Path of the field to validate
- * @param maxValue The maximum value, or a LogicFn that returns the maximum value.
- * @param config Optional, allows providing any of the following options:
- *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.max(maxValue)`
- *    or a function that receives the `FieldContext` and returns custom validation error(s).
- * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
- */
-function max(path, maxValue, config) {
-    const MAX_MEMO = property(path, (ctx) => computed(() => (typeof maxValue === 'number' ? maxValue : maxValue(ctx))));
-    aggregateProperty(path, MAX, ({ state }) => state.property(MAX_MEMO)());
-    validate(path, (ctx) => {
-        if (isEmpty(ctx.value())) {
-            return undefined;
-        }
-        const max = ctx.state.property(MAX_MEMO)();
-        if (max === undefined || Number.isNaN(max)) {
-            return undefined;
-        }
-        if (ctx.value() > max) {
-            if (config?.error) {
-                return getOption(config.error, ctx);
-            }
-            else {
-                return maxError(max, { message: getOption(config?.message, ctx) });
-            }
-        }
-        return undefined;
-    });
-}
-
-/**
- * Binds a validator to the given path that requires the length of the value to be less than or
- * equal to the given `maxLength`.
- * This function can only be called on string or array paths.
- * In addition to binding a validator, this function adds `MAX_LENGTH` property to the field.
- *
- * @param path Path of the field to validate
- * @param maxLength The maximum length, or a LogicFn that returns the maximum length.
- * @param config Optional, allows providing any of the following options:
- *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.maxLength(maxLength)`
- *    or a function that receives the `FieldContext` and returns custom validation error(s).
- * @template TValue The type of value stored in the field the logic is bound to.
- * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
- */
-function maxLength(path, maxLength, config) {
-    const MAX_LENGTH_MEMO = property(path, (ctx) => computed(() => (typeof maxLength === 'number' ? maxLength : maxLength(ctx))));
-    aggregateProperty(path, MAX_LENGTH, ({ state }) => state.property(MAX_LENGTH_MEMO)());
-    validate(path, (ctx) => {
-        if (isEmpty(ctx.value())) {
-            return undefined;
-        }
-        const maxLength = ctx.state.property(MAX_LENGTH_MEMO)();
-        if (maxLength === undefined) {
-            return undefined;
-        }
-        if (getLengthOrSize(ctx.value()) > maxLength) {
-            if (config?.error) {
-                return getOption(config.error, ctx);
-            }
-            else {
-                return maxLengthError(maxLength, { message: getOption(config?.message, ctx) });
-            }
-        }
-        return undefined;
-    });
+ * @returns The value for the option.
+ */
+function getOption(opt, ctx) {
+    return opt instanceof Function ? opt(ctx) : opt;
 }
-
 /**
- * Binds a validator to the given path that requires the value to be greater than or equal to
- * the given `minValue`.
- * This function can only be called on number paths.
- * In addition to binding a validator, this function adds `MIN` property to the field.
- *
- * @param path Path of the field to validate
- * @param minValue The minimum value, or a LogicFn that returns the minimum value.
- * @param config Optional, allows providing any of the following options:
- *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.min(minValue)`
- *    or a function that receives the `FieldContext` and returns custom validation error(s).
- * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ * Checks if the given value is considered empty. Empty values are: null, undefined, '', false, NaN.
  */
-function min(path, minValue, config) {
-    const MIN_MEMO = property(path, (ctx) => computed(() => (typeof minValue === 'number' ? minValue : minValue(ctx))));
-    aggregateProperty(path, MIN, ({ state }) => state.property(MIN_MEMO)());
-    validate(path, (ctx) => {
-        if (isEmpty(ctx.value())) {
-            return undefined;
-        }
-        const min = ctx.state.property(MIN_MEMO)();
-        if (min === undefined || Number.isNaN(min)) {
-            return undefined;
-        }
-        if (ctx.value() < min) {
-            if (config?.error) {
-                return getOption(config.error, ctx);
-            }
-            else {
-                return minError(min, { message: getOption(config?.message, ctx) });
-            }
-        }
-        return undefined;
-    });
+function isEmpty(value) {
+    if (typeof value === 'number') {
+        return isNaN(value);
+    }
+    return value === '' || value === false || value == null;
 }
 
 /**
- * Binds a validator to the given path that requires the length of the value to be greater than or
- * equal to the given `minLength`.
- * This function can only be called on string or array paths.
- * In addition to binding a validator, this function adds `MIN_LENGTH` property to the field.
+ * A regular expression that matches valid e-mail addresses.
  *
- * @param path Path of the field to validate
- * @param minLength The minimum length, or a LogicFn that returns the minimum length.
- * @param config Optional, allows providing any of the following options:
- *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.minLength(minLength)`
- *    or a function that receives the `FieldContext` and returns custom validation error(s).
- * @template TValue The type of value stored in the field the logic is bound to.
- * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ * At a high level, this regexp matches e-mail addresses of the format `local-part@tld`, where:
+ * - `local-part` consists of one or more of the allowed characters (alphanumeric and some
+ *   punctuation symbols).
+ * - `local-part` cannot begin or end with a period (`.`).
+ * - `local-part` cannot be longer than 64 characters.
+ * - `tld` consists of one or more `labels` separated by periods (`.`). For example `localhost` or
+ *   `foo.com`.
+ * - A `label` consists of one or more of the allowed characters (alphanumeric, dashes (`-`) and
+ *   periods (`.`)).
+ * - A `label` cannot begin or end with a dash (`-`) or a period (`.`).
+ * - A `label` cannot be longer than 63 characters.
+ * - The whole address cannot be longer than 254 characters.
+ *
+ * ## Implementation background
+ *
+ * This regexp was ported over from AngularJS (see there for git history):
+ * https://github.com/angular/angular.js/blob/c133ef836/src/ng/directive/input.js#L27
+ * It is based on the
+ * [WHATWG version](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with
+ * some enhancements to incorporate more RFC rules (such as rules related to domain names and the
+ * lengths of different parts of the address). The main differences from the WHATWG version are:
+ *   - Disallow `local-part` to begin or end with a period (`.`).
+ *   - Disallow `local-part` length to exceed 64 characters.
+ *   - Disallow total address length to exceed 254 characters.
+ *
+ * See [this commit](https://github.com/angular/angular.js/commit/f3f5cf72e) for more details.
  */
-function minLength(path, minLength, config) {
-    const MIN_LENGTH_MEMO = property(path, (ctx) => computed(() => (typeof minLength === 'number' ? minLength : minLength(ctx))));
-    aggregateProperty(path, MIN_LENGTH, ({ state }) => state.property(MIN_LENGTH_MEMO)());
-    validate(path, (ctx) => {
-        if (isEmpty(ctx.value())) {
-            return undefined;
-        }
-        const minLength = ctx.state.property(MIN_LENGTH_MEMO)();
-        if (minLength === undefined) {
-            return undefined;
-        }
-        if (getLengthOrSize(ctx.value()) < minLength) {
-            if (config?.error) {
-                return getOption(config.error, ctx);
-            }
-            else {
-                return minLengthError(minLength, { message: getOption(config?.message, ctx) });
-            }
-        }
-        return undefined;
-    });
-}
-
+const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 /**
- * Binds a validator to the given path that requires the value to match a specific regex pattern.
+ * Binds a validator to the given path that requires the value to match the standard email format.
  * This function can only be called on string paths.
- * In addition to binding a validator, this function adds `PATTERN` property to the field.
  *
  * @param path Path of the field to validate
- * @param pattern The RegExp pattern to match, or a LogicFn that returns the RegExp pattern.
  * @param config Optional, allows providing any of the following options:
- *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.pattern(pattern)`
+ *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.email()`
  *    or a function that receives the `FieldContext` and returns custom validation error(s).
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
-function pattern(path, pattern, config) {
-    const PATTERN_MEMO = property(path, (ctx) => computed(() => (pattern instanceof RegExp ? pattern : pattern(ctx))));
-    aggregateProperty(path, PATTERN, ({ state }) => state.property(PATTERN_MEMO)());
+function email(path, config) {
     validate(path, (ctx) => {
         if (isEmpty(ctx.value())) {
             return undefined;
         }
-        const pattern = ctx.state.property(PATTERN_MEMO)();
-        if (pattern === undefined) {
-            return undefined;
-        }
-        if (!pattern.test(ctx.value())) {
+        if (!EMAIL_REGEXP.test(ctx.value())) {
             if (config?.error) {
                 return getOption(config.error, ctx);
             }
             else {
-                return patternError(pattern, { message: getOption(config?.message, ctx) });
+                return emailError({ message: getOption(config?.message, ctx) });
             }
         }
         return undefined;
@@ -2887,490 +3318,290 @@ function pattern(path, pattern, config) {
 }
 
 /**
- * Binds a validator to the given path that requires the value to be non-empty.
- * This function can only be called on any type of path.
- * In addition to binding a validator, this function adds `REQUIRED` property to the field.
+ * Binds a validator to the given path that requires the value to be less than or equal to the
+ * given `maxValue`.
+ * This function can only be called on number paths.
+ * In addition to binding a validator, this function adds `MAX` property to the field.
  *
  * @param path Path of the field to validate
+ * @param maxValue The maximum value, or a LogicFn that returns the maximum value.
  * @param config Optional, allows providing any of the following options:
- *  - `message`: A user-facing message for the error.
- *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.required()`
+ *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.max(maxValue)`
  *    or a function that receives the `FieldContext` and returns custom validation error(s).
- *  - `when`: A function that receives the `FieldContext` and returns true if the field is required
- * @template TValue The type of value stored in the field the logic is bound to.
  * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
-function required(path, config) {
-    const REQUIRED_MEMO = property(path, (ctx) => computed(() => (config?.when ? config.when(ctx) : true)));
-    aggregateProperty(path, REQUIRED, ({ state }) => state.property(REQUIRED_MEMO)());
+function max(path, maxValue, config) {
+    const MAX_MEMO = property(path, (ctx) => computed(() => (typeof maxValue === 'number' ? maxValue : maxValue(ctx))));
+    aggregateProperty(path, MAX, ({ state }) => state.property(MAX_MEMO)());
     validate(path, (ctx) => {
-        if (ctx.state.property(REQUIRED_MEMO)() && isEmpty(ctx.value())) {
-            if (config?.error) {
-                return getOption(config.error, ctx);
-            }
-            else {
-                return requiredError({ message: getOption(config?.message, ctx) });
-            }
-        }
-        return undefined;
-    });
-}
-
-// TODO: These utilities to be replaced with proper integration into framework.
-function privateGetComponentInstance(injector) {
-    assertIsNodeInjector(injector);
-    if (injector._tNode.directiveStart === 0 || injector._tNode.componentOffset === -1) {
-        return undefined;
-    }
-    return injector._lView[injector._tNode.directiveStart + injector._tNode.componentOffset];
-}
-function privateSetComponentInput(inputSignal, value) {
-    inputSignal[_SIGNAL].applyValueToInputSignal(inputSignal[_SIGNAL], value);
-}
-function privateIsSignalInput(value) {
-    return isInputSignal(value);
-}
-function privateIsModelInput(value) {
-    return isInputSignal(value) && isObject(value) && 'subscribe' in value;
-}
-function privateRunEffect(ref) {
-    ref[_SIGNAL].run();
-}
-function assertIsNodeInjector(injector) {
-    if (!('_tNode' in injector)) {
-        throw new Error('Expected a Node Injector');
-    }
-}
-function isInputSignal(value) {
-    if (!isObject(value) || !(_SIGNAL in value)) {
-        return false;
-    }
-    const node = value[_SIGNAL];
-    return isObject(node) && 'applyValueToInputSignal' in node;
-}
-
-/**
- * A fake version of `NgControl` provided by the `Control` directive. This allows interoperability
- * with a wider range of components designed to work with reactive forms, in particular ones that
- * inject the `NgControl`. The interop control does not implement *all* properties and methods of
- * the real `NgControl`, but does implement some of the most commonly used ones that have a clear
- * equivalent in signal forms.
- */
-class InteropNgControl {
-    field;
-    constructor(field) {
-        this.field = field;
-    }
-    control = this;
-    get value() {
-        return this.field().value();
-    }
-    get valid() {
-        return this.field().valid();
-    }
-    get invalid() {
-        return this.field().invalid();
-    }
-    get pending() {
-        return this.field().pending();
-    }
-    get disabled() {
-        return this.field().disabled();
-    }
-    get enabled() {
-        return !this.field().disabled();
-    }
-    get errors() {
-        const errors = this.field().errors();
-        if (errors.length === 0) {
-            return null;
-        }
-        const errObj = {};
-        for (const error of errors) {
-            errObj[error.kind] = error;
-        }
-        return errObj;
-    }
-    get pristine() {
-        return !this.field().dirty();
-    }
-    get dirty() {
-        return this.field().dirty();
-    }
-    get touched() {
-        return this.field().touched();
-    }
-    get untouched() {
-        return !this.field().touched();
-    }
-    get status() {
-        if (this.field().disabled()) {
-            return 'DISABLED';
-        }
-        if (this.field().valid()) {
-            return 'VALID';
-        }
-        if (this.field().invalid()) {
-            return 'INVALID';
+        if (isEmpty(ctx.value())) {
+            return undefined;
         }
-        if (this.field().pending()) {
-            return 'PENDING';
+        const max = ctx.state.property(MAX_MEMO)();
+        if (max === undefined || Number.isNaN(max)) {
+            return undefined;
         }
-        throw Error('AssertionError: unknown form control status');
-    }
-    valueAccessor = null;
-    hasValidator(validator) {
-        // This addresses a common case where users look for the presence of `Validators.required` to
-        // determine whether or not to show a required "*" indicator in the UI.
-        if (validator === Validators.required) {
-            return this.field().property(REQUIRED)();
+        if (ctx.value() > max) {
+            if (config?.error) {
+                return getOption(config.error, ctx);
+            }
+            else {
+                return maxError(max, { message: getOption(config?.message, ctx) });
+            }
         }
-        return false;
-    }
-    updateValueAndValidity() {
-        // No-op since value and validity are always up to date in signal forms.
-        // We offer this method so that reactive forms code attempting to call it doesn't error.
-    }
+        return undefined;
+    });
 }
 
 /**
- * Binds a form `Field` to a UI control that edits it. A UI control can be one of several things:
- * 1. A native HTML input or textarea
- * 2. A signal forms custom control that implements `FormValueControl` or `FormCheckboxControl`
- * 3. A component that provides a ControlValueAccessor. This should only be used to backwards
- *    compatibility with reactive forms. Prefer options (1) and (2).
+ * Binds a validator to the given path that requires the length of the value to be less than or
+ * equal to the given `maxLength`.
+ * This function can only be called on string or array paths.
+ * In addition to binding a validator, this function adds `MAX_LENGTH` property to the field.
  *
- * This directive has several responsibilities:
- * 1. Two-way binds the field's value with the UI control's value
- * 2. Binds additional forms related state on the field to the UI control (disabled, required, etc.)
- * 3. Relays relevant events on the control to the field (e.g. marks field touched on blur)
- * 4. Provides a fake `NgControl` that implements a subset of the features available on the reactive
- *    forms `NgControl`. This is provided to improve interoperability with controls designed to work
- *    with reactive forms. It should not be used by controls written for signal forms.
+ * @param path Path of the field to validate
+ * @param maxLength The maximum length, or a LogicFn that returns the maximum length.
+ * @param config Optional, allows providing any of the following options:
+ *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.maxLength(maxLength)`
+ *    or a function that receives the `FieldContext` and returns custom validation error(s).
+ * @template TValue The type of value stored in the field the logic is bound to.
+ * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
-class Control {
-    /** The injector for this component. */
-    injector = inject(Injector);
-    renderer = inject(Renderer2);
-    /** Whether state synchronization with the field has been setup yet. */
-    initialized = false;
-    /** The field that is bound to this control. */
-    field = signal(undefined, ...(ngDevMode ? [{ debugName: "field" }] : []));
-    // If `[control]` is applied to a custom UI control, it wants to synchronize state in the field w/
-    // the inputs of that custom control. This is difficult to do in user-land. We use `effect`, but
-    // effects don't run before the lifecycle hooks of the component. This is usually okay, but has
-    // one significant issue: the UI control's required inputs won't be set in time for those
-    // lifecycle hooks to run.
-    //
-    // Eventually we can build custom functionality for the `Control` directive into the framework,
-    // but for now we work around this limitation with a hack. We use an `@Input` instead of a
-    // signal-based `input()` for the `[control]` to hook the exact moment inputs are being set,
-    // before the important lifecycle hooks of the UI control. We can then initialize all our effects
-    // and force them to run immediately, ensuring all required inputs have values.
-    set _field(value) {
-        this.field.set(value);
-        if (!this.initialized) {
-            this.initialize();
-        }
-    }
-    /** The field state of the bound field. */
-    state = computed(() => this.field()(), ...(ngDevMode ? [{ debugName: "state" }] : []));
-    /** The HTMLElement this directive is attached to. */
-    el = inject(ElementRef);
-    /** The NG_VALUE_ACCESSOR array for the host component. */
-    cvaArray = inject(NG_VALUE_ACCESSOR, { optional: true });
-    /** The Cached value for the lazily created interop NgControl. */
-    _ngControl;
-    /** A fake NgControl provided for better interop with reactive forms. */
-    get ngControl() {
-        return (this._ngControl ??= new InteropNgControl(() => this.state()));
-    }
-    /** The ControlValueAccessor for the host component. */
-    get cva() {
-        return this.cvaArray?.[0] ?? this._ngControl?.valueAccessor ?? undefined;
-    }
-    /** Initializes state synchronization between the field and the host UI control. */
-    initialize() {
-        this.initialized = true;
-        const injector = this.injector;
-        const cmp = privateGetComponentInstance(injector);
-        // If component has a `control` input, we assume that it will handle binding the field to the
-        // appropriate native/custom control in its template, so we do not attempt to bind any inputs on
-        // this component.
-        if (cmp && isShadowedControlComponent(cmp)) {
-            return;
-        }
-        if (cmp && isFormUiControl(cmp)) {
-            // If we're binding to a component that follows the standard form ui control contract,
-            // set up state synchronization based on the contract.
-            this.setupCustomUiControl(cmp);
-        }
-        else if (this.cva !== undefined) {
-            // If we're binding to a component that doesn't follow the standard contract, but provides a
-            // control value accessor, set up state synchronization based on th CVA.
-            this.setupControlValueAccessor(this.cva);
-        }
-        else if (this.el.nativeElement instanceof HTMLInputElement ||
-            this.el.nativeElement instanceof HTMLTextAreaElement ||
-            this.el.nativeElement instanceof HTMLSelectElement) {
-            // If we're binding to a native html input, set up state synchronization with its native
-            // properties / attributes.
-            this.setupNativeInput(this.el.nativeElement);
+function maxLength(path, maxLength, config) {
+    const MAX_LENGTH_MEMO = property(path, (ctx) => computed(() => (typeof maxLength === 'number' ? maxLength : maxLength(ctx))));
+    aggregateProperty(path, MAX_LENGTH, ({ state }) => state.property(MAX_LENGTH_MEMO)());
+    validate(path, (ctx) => {
+        if (isEmpty(ctx.value())) {
+            return undefined;
         }
-        else {
-            throw new Error(`Unhandled control?`);
+        const maxLength = ctx.state.property(MAX_LENGTH_MEMO)();
+        if (maxLength === undefined) {
+            return undefined;
         }
-        // Register this control on the field it is currently bound to. We do this at the end of
-        // initialization so that it only runs if we are actually syncing with this control
-        // (as opposed to just passing the field through to its `control` input).
-        effect((onCleanup) => {
-            const fieldNode = this.state();
-            fieldNode.nodeState.controls.update((controls) => [...controls, this]);
-            onCleanup(() => {
-                fieldNode.nodeState.controls.update((controls) => controls.filter((c) => c !== this));
-            });
-        }, { injector: this.injector });
-    }
-    /**
-     * Set up state synchronization between the field and a native <input>, <textarea>, or <select>.
-     */
-    setupNativeInput(input) {
-        const inputType = input instanceof HTMLTextAreaElement
-            ? 'text'
-            : input instanceof HTMLSelectElement
-                ? 'select'
-                : input.type;
-        input.addEventListener('input', () => {
-            switch (inputType) {
-                case 'checkbox':
-                    this.state().value.set(input.checked);
-                    break;
-                case 'radio':
-                    // The `input` event only fires when a radio button becomes selected, so write its `value`
-                    // into the state.
-                    this.state().value.set(input.value);
-                    break;
-                default:
-                    this.state().value.set(input.value);
-                    break;
+        if (getLengthOrSize(ctx.value()) > maxLength) {
+            if (config?.error) {
+                return getOption(config.error, ctx);
+            }
+            else {
+                return maxLengthError(maxLength, { message: getOption(config?.message, ctx) });
             }
-            this.state().markAsDirty();
-        });
-        input.addEventListener('blur', () => this.state().markAsTouched());
-        this.maybeSynchronize(() => this.state().readonly(), this.withBooleanAttribute(input, 'readonly'));
-        // TODO: consider making a global configuration option for using aria-disabled instead.
-        this.maybeSynchronize(() => this.state().disabled(), this.withBooleanAttribute(input, 'disabled'));
-        this.maybeSynchronize(() => this.state().name(), this.withAttribute(input, 'name'));
-        this.maybeSynchronize(this.propertySource(REQUIRED), this.withBooleanAttribute(input, 'required'));
-        this.maybeSynchronize(this.propertySource(MIN), this.withAttribute(input, 'min'));
-        this.maybeSynchronize(this.propertySource(MIN_LENGTH), this.withAttribute(input, 'minLength'));
-        this.maybeSynchronize(this.propertySource(MAX), this.withAttribute(input, 'max'));
-        this.maybeSynchronize(this.propertySource(MAX_LENGTH), this.withAttribute(input, 'maxLength'));
-        switch (inputType) {
-            case 'checkbox':
-                this.maybeSynchronize(() => this.state().value(), (value) => (input.checked = value));
-                break;
-            case 'radio':
-                this.maybeSynchronize(() => this.state().value(), (value) => {
-                    // Although HTML behavior is to clear the input already, we do this just in case.
-                    // It seems like it might be necessary in certain environments (e.g. Domino).
-                    input.checked = input.value === value;
-                });
-                break;
-            case 'select':
-                this.maybeSynchronize(() => this.state().value(), (value) => {
-                    // A select will not take a value unil the value's option has rendered.
-                    afterNextRender(() => (input.value = value), { injector: this.injector });
-                });
-                break;
-            default:
-                this.maybeSynchronize(() => this.state().value(), (value) => {
-                    input.value = value;
-                });
-                break;
-        }
-    }
-    /** Set up state synchronization between the field and a ControlValueAccessor. */
-    setupControlValueAccessor(cva) {
-        cva.registerOnChange((value) => this.state().value.set(value));
-        cva.registerOnTouched(() => this.state().markAsTouched());
-        this.maybeSynchronize(() => this.state().value(), (value) => cva.writeValue(value));
-        if (cva.setDisabledState) {
-            this.maybeSynchronize(() => this.state().disabled(), (value) => cva.setDisabledState(value));
-        }
-        cva.writeValue(this.state().value());
-        cva.setDisabledState?.(this.state().disabled());
-    }
-    /** Set up state synchronization between the field and a FormUiControl. */
-    setupCustomUiControl(cmp) {
-        // Handle the property side of the model binding. How we do this depends on the shape of the
-        // component. There are 2 options:
-        // * it provides a `value` model (most controls that edit a single value)
-        // * it provides a `checked` model with no `value` signal (custom checkbox)
-        let cleanupValue;
-        if (isFormValueControl(cmp)) {
-            // <custom-input [(value)]="state().value">
-            this.maybeSynchronize(() => this.state().value(), withInput(cmp.value));
-            cleanupValue = cmp.value.subscribe((newValue) => this.state().value.set(newValue));
-        }
-        else if (isFormCheckboxControl(cmp)) {
-            // <custom-checkbox [(checked)]="state().value" />
-            this.maybeSynchronize(() => this.state().value(), withInput(cmp.checked));
-            cleanupValue = cmp.checked.subscribe((newValue) => this.state().value.set(newValue));
         }
-        else {
-            throw new Error(`Unknown custom control subtype`);
+        return undefined;
+    });
+}
+
+/**
+ * Binds a validator to the given path that requires the value to be greater than or equal to
+ * the given `minValue`.
+ * This function can only be called on number paths.
+ * In addition to binding a validator, this function adds `MIN` property to the field.
+ *
+ * @param path Path of the field to validate
+ * @param minValue The minimum value, or a LogicFn that returns the minimum value.
+ * @param config Optional, allows providing any of the following options:
+ *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.min(minValue)`
+ *    or a function that receives the `FieldContext` and returns custom validation error(s).
+ * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
+ */
+function min(path, minValue, config) {
+    const MIN_MEMO = property(path, (ctx) => computed(() => (typeof minValue === 'number' ? minValue : minValue(ctx))));
+    aggregateProperty(path, MIN, ({ state }) => state.property(MIN_MEMO)());
+    validate(path, (ctx) => {
+        if (isEmpty(ctx.value())) {
+            return undefined;
         }
-        this.maybeSynchronize(() => this.state().name(), withInput(cmp.name));
-        this.maybeSynchronize(() => this.state().disabled(), withInput(cmp.disabled));
-        this.maybeSynchronize(() => this.state().disabledReasons(), withInput(cmp.disabledReasons));
-        this.maybeSynchronize(() => this.state().readonly(), withInput(cmp.readonly));
-        this.maybeSynchronize(() => this.state().hidden(), withInput(cmp.hidden));
-        this.maybeSynchronize(() => this.state().errors(), withInput(cmp.errors));
-        if (privateIsModelInput(cmp.touched) || privateIsSignalInput(cmp.touched)) {
-            this.maybeSynchronize(() => this.state().touched(), withInput(cmp.touched));
+        const min = ctx.state.property(MIN_MEMO)();
+        if (min === undefined || Number.isNaN(min)) {
+            return undefined;
         }
-        this.maybeSynchronize(() => this.state().dirty(), withInput(cmp.dirty));
-        this.maybeSynchronize(() => this.state().invalid(), withInput(cmp.invalid));
-        this.maybeSynchronize(() => this.state().pending(), withInput(cmp.pending));
-        this.maybeSynchronize(this.propertySource(REQUIRED), withInput(cmp.required));
-        this.maybeSynchronize(this.propertySource(MIN), withInput(cmp.min));
-        this.maybeSynchronize(this.propertySource(MIN_LENGTH), withInput(cmp.minLength));
-        this.maybeSynchronize(this.propertySource(MAX), withInput(cmp.max));
-        this.maybeSynchronize(this.propertySource(MAX_LENGTH), withInput(cmp.maxLength));
-        this.maybeSynchronize(this.propertySource(PATTERN), withInput(cmp.pattern));
-        let cleanupTouch;
-        let cleanupDefaultTouch;
-        if (privateIsModelInput(cmp.touched) || isOutputRef(cmp.touched)) {
-            cleanupTouch = cmp.touched.subscribe(() => this.state().markAsTouched());
+        if (ctx.value() < min) {
+            if (config?.error) {
+                return getOption(config.error, ctx);
+            }
+            else {
+                return minError(min, { message: getOption(config?.message, ctx) });
+            }
         }
-        else {
-            // If the component did not give us a touch event stream, use the standard touch logic,
-            // marking it touched when the focus moves from inside the host element to outside.
-            const listener = (event) => {
-                const newActiveEl = event.relatedTarget;
-                if (!this.el.nativeElement.contains(newActiveEl)) {
-                    this.state().markAsTouched();
-                }
-            };
-            this.el.nativeElement.addEventListener('focusout', listener);
-            cleanupDefaultTouch = () => this.el.nativeElement.removeEventListener('focusout', listener);
+        return undefined;
+    });
+}
+
+/**
+ * Binds a validator to the given path that requires the length of the value to be greater than or
+ * equal to the given `minLength`.
+ * This function can only be called on string or array paths.
+ * In addition to binding a validator, this function adds `MIN_LENGTH` property to the field.
+ *
+ * @param path Path of the field to validate
+ * @param minLength The minimum length, or a LogicFn that returns the minimum length.
+ * @param config Optional, allows providing any of the following options:
+ *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.minLength(minLength)`
+ *    or a function that receives the `FieldContext` and returns custom validation error(s).
+ * @template TValue The type of value stored in the field the logic is bound to.
+ * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
+ */
+function minLength(path, minLength, config) {
+    const MIN_LENGTH_MEMO = property(path, (ctx) => computed(() => (typeof minLength === 'number' ? minLength : minLength(ctx))));
+    aggregateProperty(path, MIN_LENGTH, ({ state }) => state.property(MIN_LENGTH_MEMO)());
+    validate(path, (ctx) => {
+        if (isEmpty(ctx.value())) {
+            return undefined;
         }
-        // Cleanup for output binding subscriptions:
-        this.injector.get(DestroyRef).onDestroy(() => {
-            cleanupValue?.unsubscribe();
-            cleanupTouch?.unsubscribe();
-            cleanupDefaultTouch?.();
-        });
-    }
-    /** Synchronize a value from a reactive source to a given sink. */
-    maybeSynchronize(source, sink) {
-        if (!sink) {
+        const minLength = ctx.state.property(MIN_LENGTH_MEMO)();
+        if (minLength === undefined) {
             return undefined;
         }
-        const ref = effect(() => {
-            const value = source();
-            untracked(() => sink(value));
-        }, ...(ngDevMode ? [{ debugName: "ref", injector: this.injector }] : [{ injector: this.injector }]));
-        // Run the effect immediately to ensure sinks which are required inputs are set before they can
-        // be observed. See the note on `_field` for more details.
-        privateRunEffect(ref);
-    }
-    /** Creates a reactive value source by reading the given AggregateProperty from the field. */
-    propertySource(key) {
-        const metaSource = computed(() => this.state().hasProperty(key) ? this.state().property(key) : key.getInitial, ...(ngDevMode ? [{ debugName: "metaSource" }] : []));
-        return () => metaSource()?.();
-    }
-    /** Creates a (non-boolean) value sync that writes the given attribute of the given element. */
-    withAttribute(element, attribute) {
-        return (value) => {
-            if (value !== undefined) {
-                this.renderer.setAttribute(element, attribute, value.toString());
+        if (getLengthOrSize(ctx.value()) < minLength) {
+            if (config?.error) {
+                return getOption(config.error, ctx);
             }
             else {
-                this.renderer.removeAttribute(element, attribute);
+                return minLengthError(minLength, { message: getOption(config?.message, ctx) });
             }
-        };
-    }
-    /** Creates a boolean value sync that writes the given attribute of the given element. */
-    withBooleanAttribute(element, attribute) {
-        return (value) => {
-            if (value) {
-                this.renderer.setAttribute(element, attribute, '');
+        }
+        return undefined;
+    });
+}
+
+/**
+ * Binds a validator to the given path that requires the value to match a specific regex pattern.
+ * This function can only be called on string paths.
+ * In addition to binding a validator, this function adds `PATTERN` property to the field.
+ *
+ * @param path Path of the field to validate
+ * @param pattern The RegExp pattern to match, or a LogicFn that returns the RegExp pattern.
+ * @param config Optional, allows providing any of the following options:
+ *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.pattern(pattern)`
+ *    or a function that receives the `FieldContext` and returns custom validation error(s).
+ * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
+ */
+function pattern(path, pattern, config) {
+    const PATTERN_MEMO = property(path, (ctx) => computed(() => (pattern instanceof RegExp ? pattern : pattern(ctx))));
+    aggregateProperty(path, PATTERN, ({ state }) => state.property(PATTERN_MEMO)());
+    validate(path, (ctx) => {
+        if (isEmpty(ctx.value())) {
+            return undefined;
+        }
+        const pattern = ctx.state.property(PATTERN_MEMO)();
+        if (pattern === undefined) {
+            return undefined;
+        }
+        if (!pattern.test(ctx.value())) {
+            if (config?.error) {
+                return getOption(config.error, ctx);
             }
             else {
-                this.renderer.removeAttribute(element, attribute);
+                return patternError(pattern, { message: getOption(config?.message, ctx) });
             }
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: Control, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: Control, isStandalone: true, selector: "[control]", inputs: { _field: ["control", "_field"] }, providers: [
-            {
-                provide: NgControl,
-                useFactory: () => inject(Control).ngControl,
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: Control, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[control]',
-                    providers: [
-                        {
-                            provide: NgControl,
-                            useFactory: () => inject(Control).ngControl,
-                        },
-                    ],
-                }]
-        }], propDecorators: { _field: [{
-                type: Input,
-                args: [{ required: true, alias: 'control' }]
-            }] } });
-/** Creates a value sync from an input signal. */
-function withInput(input) {
-    return input ? (value) => privateSetComponentInput(input, value) : undefined;
+        }
+        return undefined;
+    });
 }
+
 /**
- * Checks whether the given component matches the contract for either FormValueControl or
- * FormCheckboxControl.
+ * Binds a validator to the given path that requires the value to be non-empty.
+ * This function can only be called on any type of path.
+ * In addition to binding a validator, this function adds `REQUIRED` property to the field.
+ *
+ * @param path Path of the field to validate
+ * @param config Optional, allows providing any of the following options:
+ *  - `message`: A user-facing message for the error.
+ *  - `error`: Custom validation error(s) to be used instead of the default `ValidationError.required()`
+ *    or a function that receives the `FieldContext` and returns custom validation error(s).
+ *  - `when`: A function that receives the `FieldContext` and returns true if the field is required
+ * @template TValue The type of value stored in the field the logic is bound to.
+ * @template TPathKind The kind of path the logic is bound to (a root path, child path, or item of an array)
+ *
+ * @experimental 21.0.0
  */
-function isFormUiControl(cmp) {
-    const castCmp = cmp;
-    return ((isFormValueControl(castCmp) || isFormCheckboxControl(castCmp)) &&
-        (castCmp.readonly === undefined || privateIsSignalInput(castCmp.readonly)) &&
-        (castCmp.disabled === undefined || privateIsSignalInput(castCmp.disabled)) &&
-        (castCmp.disabledReasons === undefined || privateIsSignalInput(castCmp.disabledReasons)) &&
-        (castCmp.errors === undefined || privateIsSignalInput(castCmp.errors)) &&
-        (castCmp.invalid === undefined || privateIsSignalInput(castCmp.invalid)) &&
-        (castCmp.pending === undefined || privateIsSignalInput(castCmp.pending)) &&
-        (castCmp.touched === undefined ||
-            privateIsModelInput(castCmp.touched) ||
-            privateIsSignalInput(castCmp.touched) ||
-            isOutputRef(castCmp.touched)) &&
-        (castCmp.dirty === undefined || privateIsSignalInput(castCmp.dirty)) &&
-        (castCmp.min === undefined || privateIsSignalInput(castCmp.min)) &&
-        (castCmp.minLength === undefined || privateIsSignalInput(castCmp.minLength)) &&
-        (castCmp.max === undefined || privateIsSignalInput(castCmp.max)) &&
-        (castCmp.maxLength === undefined || privateIsSignalInput(castCmp.maxLength)));
-}
-/** Checks whether the given FormUiControl is a FormValueControl. */
-function isFormValueControl(cmp) {
-    return privateIsModelInput(cmp.value);
-}
-/** Checks whether the given FormUiControl is a FormCheckboxControl. */
-function isFormCheckboxControl(cmp) {
-    return (privateIsModelInput(cmp.checked) &&
-        cmp.value === undefined);
+function required(path, config) {
+    const REQUIRED_MEMO = property(path, (ctx) => computed(() => (config?.when ? config.when(ctx) : true)));
+    aggregateProperty(path, REQUIRED, ({ state }) => state.property(REQUIRED_MEMO)());
+    validate(path, (ctx) => {
+        if (ctx.state.property(REQUIRED_MEMO)() && isEmpty(ctx.value())) {
+            if (config?.error) {
+                return getOption(config.error, ctx);
+            }
+            else {
+                return requiredError({ message: getOption(config?.message, ctx) });
+            }
+        }
+        return undefined;
+    });
 }
-/** Checks whether the given component has an input called `control`. */
-function isShadowedControlComponent(cmp) {
-    const mirror = reflectComponentType(cmp.constructor);
-    return mirror?.inputs.some((input) => input.templateName === 'control') ?? false;
+
+/**
+ * Validates a field using a `StandardSchemaV1` compatible validator (e.g. a Zod validator).
+ *
+ * See https://github.com/standard-schema/standard-schema for more about standard schema.
+ *
+ * @param path The `FieldPath` to the field to validate.
+ * @param schema The standard schema compatible validator to use for validation.
+ * @template TSchema The type validated by the schema. This may be either the full `TValue` type,
+ *   or a partial of it.
+ * @template TValue The type of value stored in the field being validated.
+ *
+ * @experimental 21.0.0
+ */
+function validateStandardSchema(path, schema) {
+    // We create both a sync and async validator because the standard schema validator can return
+    // either a sync result or a Promise, and we need to handle both cases. The sync validator
+    // handles the sync result, and the async validator handles the Promise.
+    // We memoize the result of the validation function here, so that it is only run once for both
+    // validators, it can then be passed through both sync & async validation.
+    const VALIDATOR_MEMO = property(path, ({ value }) => {
+        return computed(() => schema['~standard'].validate(value()));
+    });
+    validateTree(path, ({ state, fieldOf }) => {
+        // Skip sync validation if the result is a Promise.
+        const result = state.property(VALIDATOR_MEMO)();
+        if (_isPromise(result)) {
+            return [];
+        }
+        return result.issues?.map((issue) => standardIssueToFormTreeError(fieldOf(path), issue)) ?? [];
+    });
+    validateAsync(path, {
+        params: ({ state }) => {
+            // Skip async validation if the result is *not* a Promise.
+            const result = state.property(VALIDATOR_MEMO)();
+            return _isPromise(result) ? result : undefined;
+        },
+        factory: (params) => {
+            return resource({
+                params,
+                loader: async ({ params }) => (await params)?.issues ?? [],
+            });
+        },
+        errors: (issues, { fieldOf }) => {
+            return issues.map((issue) => standardIssueToFormTreeError(fieldOf(path), issue));
+        },
+    });
 }
-/** Checks whether the given object is an output ref. */
-function isOutputRef(value) {
-    return value instanceof OutputEmitterRef || value instanceof EventEmitter;
+/**
+ * Converts a `StandardSchemaV1.Issue` to a `FormTreeError`.
+ *
+ * @param field The root field to which the issue's path is relative.
+ * @param issue The `StandardSchemaV1.Issue` to convert.
+ * @returns A `ValidationError` representing the issue.
+ */
+function standardIssueToFormTreeError(field, issue) {
+    let target = field;
+    for (const pathPart of issue.path ?? []) {
+        const pathKey = typeof pathPart === 'object' ? pathPart.key : pathPart;
+        target = target[pathKey];
+    }
+    return addDefaultField(standardSchemaError(issue), target);
 }
 
-export { AggregateProperty, Control, CustomValidationError, EmailValidationError, InteropNgControl, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, Property, REQUIRED, RequiredValidationError, StandardSchemaValidationError, aggregateProperty, andProperty, apply, applyEach, applyWhen, applyWhenValue, createProperty, customError, disabled, email, emailError, form, hidden, listProperty, max, maxError, maxLength, maxLengthError, maxProperty, min, minError, minLength, minLengthError, minProperty, orProperty, pattern, patternError, property, readonly, reducedProperty, required, requiredError, schema, standardSchemaError, submit, validate, validateAsync, validateHttp, validateTree };
+export { AggregateProperty, Control, CustomValidationError, EmailValidationError, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, Property, REQUIRED, RequiredValidationError, StandardSchemaValidationError, aggregateProperty, andProperty, apply, applyEach, applyWhen, applyWhenValue, createProperty, customError, disabled, email, emailError, form, hidden, listProperty, max, maxError, maxLength, maxLengthError, maxProperty, min, minError, minLength, minLengthError, minProperty, orProperty, pattern, patternError, property, readonly, reducedProperty, required, requiredError, schema, standardSchemaError, submit, validate, validateAsync, validateHttp, validateStandardSchema, validateTree };
 //# sourceMappingURL=signals.mjs.map