@angular/forms 21.0.0-rc.1 → 21.0.0-rc.2

package/fesm2022/signals.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v21.0.0-rc.1
+ * @license Angular v21.0.0-rc.2
  * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
@@ -7,7 +7,7 @@
 import { httpResource } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { computed, untracked, InjectionToken, inject, Injector, input, ɵCONTROL as _CONTROL, effect, Directive, runInInjectionContext, linkedSignal, signal, APP_ID, ɵisPromise as _isPromise, resource } from '@angular/core';
-import { Validators, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
 function isArray(value) {
@@ -150,6 +150,21 @@ function addDefaultField(errors, field) {
   return errors;
 }
 
+let boundPathDepth = 0;
+function getBoundPathDepth() {
+  return boundPathDepth;
+}
+function setBoundPathDepthForResolution(fn, depth) {
+  return (...args) => {
+    try {
+      boundPathDepth = depth;
+      return fn(...args);
+    } finally {
+      boundPathDepth = 0;
+    }
+  };
+}
+
 const DYNAMIC = Symbol();
 const IGNORED = Symbol();
 class AbstractLogic {
@@ -307,21 +322,6 @@ class LogicContainer {
   }
 }
 
-let boundPathDepth = 0;
-function getBoundPathDepth() {
-  return boundPathDepth;
-}
-function setBoundPathDepthForResolution(fn, depth) {
-  return (...args) => {
-    try {
-      boundPathDepth = depth;
-      return fn(...args);
-    } finally {
-      boundPathDepth = 0;
-    }
-  };
-}
-
 class AbstractLogicNodeBuilder {
   depth;
   constructor(depth) {
@@ -362,6 +362,12 @@ class LogicNodeBuilder extends AbstractLogicNodeBuilder {
     this.getCurrent().addMetadataFactory(key, factory);
   }
   getChild(key) {
+    if (key === DYNAMIC) {
+      const children = this.getCurrent().children;
+      if (children.size > (children.has(DYNAMIC) ? 1 : 0)) {
+        this.current = undefined;
+      }
+    }
     return this.getCurrent().getChild(key);
   }
   hasLogic(builder) {
@@ -510,16 +516,16 @@ function getAllChildBuilders(builder, key) {
       return children;
     });
   } else if (builder instanceof NonMergeableLogicNodeBuilder) {
-    if (builder.children.has(key)) {
-      return [{
-        builder: builder.children.get(key),
-        predicates: []
-      }];
-    }
+    return [...(key !== DYNAMIC && builder.children.has(DYNAMIC) ? [{
+      builder: builder.getChild(DYNAMIC),
+      predicates: []
+    }] : []), ...(builder.children.has(key) ? [{
+      builder: builder.getChild(key),
+      predicates: []
+    }] : [])];
   } else {
     throw new Error('Unknown LogicNodeBuilder type');
   }
-  return [];
 }
 function createLogic(builder, predicates, depth) {
   const logic = new LogicContainer(predicates);
@@ -569,9 +575,6 @@ class FieldPathNode {
     }
     return this.parent.builder.getChild(this.keyInParent);
   }
-  get element() {
-    return this.getChild(DYNAMIC);
-  }
   getChild(key) {
     if (!this.children.has(key)) {
       this.children.set(key, new FieldPathNode([...this.keys, key], this.root, this, key));
@@ -954,6 +957,21 @@ function validateHttp(path, opts) {
   });
 }
 
+const DEBOUNCER = reducedMetadataKey((_, item) => item, () => undefined);
+
+function debounce(path, durationOrDebouncer) {
+  assertPathIsCurrent(path);
+  const pathNode = FieldPathNode.unwrapFieldPath(path);
+  const debouncer = typeof durationOrDebouncer === 'function' ? durationOrDebouncer : durationOrDebouncer > 0 ? debounceForDuration(durationOrDebouncer) : immediate;
+  pathNode.builder.addAggregateMetadataRule(DEBOUNCER, () => debouncer);
+}
+function debounceForDuration(durationInMilliseconds) {
+  return () => {
+    return new Promise(resolve => setTimeout(resolve, durationInMilliseconds));
+  };
+}
+function immediate() {}
+
 class InteropNgControl {
   field;
   constructor(field) {
@@ -1041,33 +1059,12 @@ class Field {
     self: true
   });
   interopNgControl;
-  get controlValueAccessor() {
+  get ɵinteropControl() {
     return this.controlValueAccessors?.[0] ?? this.interopNgControl?.valueAccessor ?? undefined;
   }
-  get ɵhasInteropControl() {
-    return this.controlValueAccessor !== undefined;
-  }
-  ɵgetOrCreateNgControl() {
+  getOrCreateNgControl() {
     return this.interopNgControl ??= new InteropNgControl(this.state);
   }
-  ɵinteropControlCreate() {
-    const controlValueAccessor = this.controlValueAccessor;
-    controlValueAccessor.registerOnChange(value => {
-      const state = this.state();
-      state.value.set(value);
-      state.markAsDirty();
-    });
-    controlValueAccessor.registerOnTouched(() => this.state().markAsTouched());
-  }
-  ɵinteropControlUpdate() {
-    const controlValueAccessor = this.controlValueAccessor;
-    const value = this.state().value();
-    const disabled = this.state().disabled();
-    untracked(() => {
-      controlValueAccessor.writeValue(value);
-      controlValueAccessor.setDisabledState?.(disabled);
-    });
-  }
   ɵregister() {
     effect(onCleanup => {
       const fieldNode = this.state();
@@ -1081,7 +1078,7 @@ class Field {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0-rc.1",
+    version: "21.0.0-rc.2",
     ngImport: i0,
     type: Field,
     deps: [],
@@ -1089,7 +1086,7 @@ class Field {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.1.0",
-    version: "21.0.0-rc.1",
+    version: "21.0.0-rc.2",
     type: Field,
     isStandalone: true,
     selector: "[field]",
@@ -1107,14 +1104,14 @@ class Field {
       useExisting: Field
     }, {
       provide: NgControl,
-      useFactory: () => inject(Field).ɵgetOrCreateNgControl()
+      useFactory: () => inject(Field).getOrCreateNgControl()
     }],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0-rc.1",
+  version: "21.0.0-rc.2",
   ngImport: i0,
   type: Field,
   decorators: [{
@@ -1126,7 +1123,7 @@ i0.ɵɵngDeclareClassMetadata({
         useExisting: Field
       }, {
         provide: NgControl,
-        useFactory: () => inject(Field).ɵgetOrCreateNgControl()
+        useFactory: () => inject(Field).getOrCreateNgControl()
       }]
     }]
   }],
@@ -1187,6 +1184,9 @@ class FieldNodeContext {
   get key() {
     return this.node.structure.keyInParent;
   }
+  get pathKeys() {
+    return this.node.structure.pathKeys;
+  }
   index = computed(() => {
     const key = this.key();
     if (!isArray(untracked(this.node.structure.parent.value))) {
@@ -1196,9 +1196,15 @@ class FieldNodeContext {
   }, ...(ngDevMode ? [{
     debugName: "index"
   }] : []));
-  fieldOf = p => this.resolve(p);
+  fieldTreeOf = p => this.resolve(p);
   stateOf = p => this.resolve(p)();
-  valueOf = p => this.resolve(p)().value();
+  valueOf = p => {
+    const result = this.resolve(p)().value();
+    if (result instanceof AbstractControl) {
+      throw new Error(`Tried to read an 'AbstractControl' value form a 'form()'. Did you mean to use 'compatForm()' instead?`);
+    }
+    return result;
+  };
 }
 
 class FieldMetadataState {
@@ -1235,7 +1241,7 @@ class FieldMetadataState {
 }
 
 const FIELD_PROXY_HANDLER = {
-  get(getTgt, p) {
+  get(getTgt, p, receiver) {
     const tgt = getTgt();
     const child = tgt.structure.getChild(p);
     if (child !== undefined) {
@@ -1250,7 +1256,28 @@ const FIELD_PROXY_HANDLER = {
         return Array.prototype[p];
       }
     }
+    if (isObject(value)) {
+      if (p === Symbol.iterator) {
+        return function* () {
+          for (const key in receiver) {
+            yield [key, receiver[key]];
+          }
+        };
+      }
+    }
     return undefined;
+  },
+  getOwnPropertyDescriptor(getTgt, prop) {
+    const value = untracked(getTgt().value);
+    const desc = Reflect.getOwnPropertyDescriptor(value, prop);
+    if (desc && !desc.configurable) {
+      desc.configurable = true;
+    }
+    return desc;
+  },
+  ownKeys(getTgt) {
+    const value = untracked(getTgt().value);
+    return typeof value === 'object' && value !== null ? Reflect.ownKeys(value) : [];
   }
 };
 
@@ -1507,8 +1534,8 @@ class FieldNode {
   metadataState;
   nodeState;
   submitState;
-  _context = undefined;
   fieldAdapter;
+  _context = undefined;
   get context() {
     return this._context ??= new FieldNodeContext(this);
   }
@@ -1521,12 +1548,26 @@ class FieldNode {
     this.metadataState = new FieldMetadataState(this);
     this.submitState = new FieldSubmitState(this);
   }
+  pendingSync = linkedSignal(...(ngDevMode ? [{
+    debugName: "pendingSync",
+    source: () => this.value(),
+    computation: () => undefined
+  }] : [{
+    source: () => this.value(),
+    computation: () => undefined
+  }]));
   get logicNode() {
     return this.structure.logic;
   }
   get value() {
     return this.structure.value;
   }
+  _controlValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{
+    debugName: "_controlValue"
+  }] : []));
+  get controlValue() {
+    return this._controlValue.asReadonly();
+  }
   get keyInParent() {
     return this.structure.keyInParent;
   }
@@ -1601,6 +1642,7 @@ class FieldNode {
   }
   markAsTouched() {
     this.nodeState.markAsTouched();
+    this.sync();
   }
   markAsDirty() {
     this.nodeState.markAsDirty();
@@ -1612,6 +1654,28 @@ class FieldNode {
       child.reset();
     }
   }
+  setControlValue(newValue) {
+    this._controlValue.set(newValue);
+    this.markAsDirty();
+    this.debounceSync();
+  }
+  sync() {
+    this.value.set(this.controlValue());
+    this.pendingSync.set(undefined);
+  }
+  debounceSync() {
+    const promise = this.nodeState.debouncer();
+    if (promise) {
+      promise.then(() => {
+        if (promise === this.pendingSync()) {
+          this.sync();
+        }
+      });
+      this.pendingSync.set(promise);
+    } else {
+      this.sync();
+    }
+  }
   static newRoot(fieldManager, value, pathNode, adapter) {
     return adapter.newRoot(fieldManager, value, pathNode, adapter);
   }
@@ -1688,6 +1752,16 @@ class FieldNodeState {
   }, ...(ngDevMode ? [{
     debugName: "name"
   }] : []));
+  debouncer() {
+    if (this.node.logicNode.logic.hasAggregateMetadata(DEBOUNCER)) {
+      const debouncerLogic = this.node.logicNode.logic.getAggregateMetadata(DEBOUNCER);
+      const debouncer = debouncerLogic.compute(this.node.context);
+      if (debouncer) {
+        return debouncer(this.node.context);
+      }
+    }
+    return this.node.structure.parent?.nodeState.debouncer();
+  }
   isNonInteractive = computed(() => this.hidden() || this.disabled() || this.readonly(), ...(ngDevMode ? [{
     debugName: "isNonInteractive"
   }] : []));
@@ -1766,6 +1840,7 @@ function normalizeFormArgs(args) {
   }
   return [model, schema, options];
 }
+
 function form(...args) {
   const [model, schema, options] = normalizeFormArgs(args);
   const injector = options?.injector ?? inject(Injector);
@@ -1778,7 +1853,7 @@ function form(...args) {
 }
 function applyEach(path, schema) {
   assertPathIsCurrent(path);
-  const elementPath = FieldPathNode.unwrapFieldPath(path).element.fieldPathProxy;
+  const elementPath = FieldPathNode.unwrapFieldPath(path).getChild(DYNAMIC).fieldPathProxy;
   apply(elementPath, schema);
 }
 function apply(path, schema) {
@@ -2018,13 +2093,13 @@ function validateStandardSchema(path, schema) {
   });
   validateTree(path, ({
     state,
-    fieldOf
+    fieldTreeOf
   }) => {
     const result = state.metadata(VALIDATOR_MEMO)();
     if (_isPromise(result)) {
       return [];
     }
-    return result.issues?.map(issue => standardIssueToFormTreeError(fieldOf(path), issue)) ?? [];
+    return result.issues?.map(issue => standardIssueToFormTreeError(fieldTreeOf(path), issue)) ?? [];
   });
   validateAsync(path, {
     params: ({
@@ -2042,9 +2117,9 @@ function validateStandardSchema(path, schema) {
       });
     },
     onSuccess: (issues, {
-      fieldOf
+      fieldTreeOf
     }) => {
-      return issues.map(issue => standardIssueToFormTreeError(fieldOf(path), issue));
+      return issues.map(issue => standardIssueToFormTreeError(fieldTreeOf(path), issue));
     },
     onError: () => {}
   });
@@ -2058,5 +2133,5 @@ function standardIssueToFormTreeError(field, issue) {
   return addDefaultField(standardSchemaError(issue), target);
 }
 
-export { AggregateMetadataKey, CustomValidationError, EmailValidationError, FIELD, Field, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MetadataKey, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, REQUIRED, RequiredValidationError, StandardSchemaValidationError, aggregateMetadata, andMetadataKey, apply, applyEach, applyWhen, applyWhenValue, createMetadataKey, customError, disabled, email, emailError, form, hidden, listMetadataKey, max, maxError, maxLength, maxLengthError, maxMetadataKey, metadata, min, minError, minLength, minLengthError, minMetadataKey, orMetadataKey, pattern, patternError, readonly, reducedMetadataKey, required, requiredError, schema, standardSchemaError, submit, validate, validateAsync, validateHttp, validateStandardSchema, validateTree };
+export { AggregateMetadataKey, CustomValidationError, EmailValidationError, FIELD, Field, MAX, MAX_LENGTH, MIN, MIN_LENGTH, MaxLengthValidationError, MaxValidationError, MetadataKey, MinLengthValidationError, MinValidationError, NgValidationError, PATTERN, PatternValidationError, REQUIRED, RequiredValidationError, StandardSchemaValidationError, aggregateMetadata, andMetadataKey, apply, applyEach, applyWhen, applyWhenValue, createMetadataKey, customError, debounce, disabled, email, emailError, form, hidden, listMetadataKey, max, maxError, maxLength, maxLengthError, maxMetadataKey, metadata, min, minError, minLength, minLengthError, minMetadataKey, orMetadataKey, pattern, patternError, readonly, reducedMetadataKey, required, requiredError, schema, standardSchemaError, submit, validate, validateAsync, validateHttp, validateStandardSchema, validateTree };
 //# sourceMappingURL=signals.mjs.map