fix(forms): ensure debounced async validators produce pending status during debounce

alxhub · alxhub · commit 0ea50ffe5adb · 2026-05-04T13:03:07.000-07:00
When using a debounced async validator, the pending status from the internal debounced resource was not flowing through to the resource created by the factory. Replicate the 'chain' logic using the new privately exported ɵchain function to propagate the loading status correctly. Fixes #68105
diff --git a/packages/core/src/core_private_export.ts b/packages/core/src/core_private_export.ts
@@ -153,6 +153,7 @@ export {
   SharedStylesHost as ɵSharedStylesHost,
 } from './render3/interfaces/shared_styles_host';
 export {
+  chain as ɵchain,
   encapsulateResourceError as ɵencapsulateResourceError,
   ResourceImpl as ɵResourceImpl,
 } from './resource/resource';
diff --git a/packages/core/src/resource/resource.ts b/packages/core/src/resource/resource.ts
@@ -598,19 +598,21 @@ class ResourceWrappedError extends Error {
  * of the other resource if it is available, or propagating the status to the current resource if it
  * is not.
  */
+export function chain<T>(resource: Resource<T>): T {
+  switch (resource.status()) {
+    case 'idle':
+      throw ResourceParamsStatus.IDLE;
+    case 'error':
+      throw new ResourceDependencyError(resource);
+    case 'loading':
+    case 'reloading':
+      throw ResourceParamsStatus.LOADING;
+  }
+  return resource.value();
+}
+
 export const paramsContext: ResourceParamsContext = {
-  chain<T>(resource: Resource<T>): T {
-    switch (resource.status()) {
-      case 'idle':
-        throw ResourceParamsStatus.IDLE;
-      case 'error':
-        throw new ResourceDependencyError(resource);
-      case 'loading':
-      case 'reloading':
-        throw ResourceParamsStatus.LOADING;
-    }
-    return resource.value();
-  },
+  chain,
 };
 
 let inParamsFunction = false;
diff --git a/packages/forms/signals/src/api/rules/validation/validate_async.ts b/packages/forms/signals/src/api/rules/validation/validate_async.ts
@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {DebounceTimer, ResourceRef, ResourceSnapshot, Signal, debounced} from '@angular/core';
+import {
+  computed,
+  DebounceTimer,
+  ResourceRef,
+  ResourceSnapshot,
+  Signal,
+  debounced,
+  ɵchain,
+} from '@angular/core';
 import {FieldNode} from '../../../field/node';
 import {addDefaultField} from '../../../field/validation';
 import {FieldPathNode} from '../../../schema/path_node';
@@ -127,7 +135,8 @@ export function validateAsync<TValue, TParams, TResult, TPathKind extends PathKi
     (_state, params) => {
       if (opts.debounce !== undefined) {
         const debouncedResource = debounced(() => params(), opts.debounce);
-        return opts.factory(debouncedResource.value);
+        const wrappedParams = computed(() => ɵchain(debouncedResource));
+        return opts.factory(wrappedParams);
       }
       return opts.factory(params);
     },
diff --git a/packages/forms/signals/test/node/validation_status.spec.ts b/packages/forms/signals/test/node/validation_status.spec.ts
@@ -8,6 +8,8 @@
 
 import {ApplicationRef, computed, Injector, Resource, resource, signal} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
+import {timeout, useAutoTick} from '@angular/private/testing';
+
 import {
   form,
   NgValidationError,
@@ -195,6 +197,7 @@ describe('validation status', () => {
   });
 
   describe('async validator', () => {
+    useAutoTick();
     it('should affect validity of host field if no target specified', async () => {
       let res: Resource<unknown>;
 
@@ -439,6 +442,45 @@ describe('validation status', () => {
       expect(f().valid()).toBe(false);
       expect(f().invalid()).toBe(true);
     });
+
+    it('should produce pending status during debounce period', async () => {
+      let res: Resource<unknown>;
+
+      const f = form(
+        signal('VALID'),
+        (p) => {
+          validateAsync(p, {
+            params: ({value}) => value(),
+            debounce: 100,
+            factory: (params) =>
+              (res = resource({
+                params,
+                loader: ({params}) =>
+                  new Promise<ValidationError[]>((r) =>
+                    setTimeout(() => r(validateValueForChild(params, undefined))),
+                  ),
+              })),
+            onSuccess: (results) => results,
+            onError: () => null,
+          });
+        },
+        {injector},
+      );
+
+      await appRef.whenStable();
+      expect(f().pending()).toBe(false);
+
+      f().value.set('INVALID');
+      await appRef.whenStable();
+
+      expect(f().pending()).withContext('pending during debounce').toBe(true);
+
+      await timeout(150);
+      await appRef.whenStable();
+
+      expect(f().pending()).toBe(false);
+      expect(f().invalid()).toBe(true);
+    });
   });
 
   describe('multiple validators', () => {
