angular
diff --git a/‎packages/core/src/resource/debounce.ts‎
Lines changed: 31 additions & 12 deletions b/‎packages/core/src/resource/debounce.ts‎
Lines changed: 31 additions & 12 deletions
diff --git a/‎packages/forms/signals/test/web/debounce_async_validation_bug.spec.ts‎
Lines changed: 59 additions & 0 deletions b/‎packages/forms/signals/test/web/debounce_async_validation_bug.spec.ts‎
Lines changed: 59 additions & 0 deletions
@@ -9,6 +9,7 @@
 import {assertInInjectionContext, inject, Injector} from '../di';
 import {DestroyRef} from '../linker';
 import {effect} from '../render3/reactivity/effect';
+import {linkedSignal} from '../render3/reactivity/linked_signal';
 import {signal} from '../render3/reactivity/signal';
 import {untracked} from '../render3/reactivity/untracked';
 import {Resource, ResourceSnapshot, type DebouncedOptions} from './api';
@@ -43,23 +44,41 @@ export function debounced<T>(
   }
   const injector = options?.injector ?? inject(Injector);
 
-  const state = signal<ResourceSnapshot<T>>({
-    status: 'resolved',
-    value: untracked(() => {
+  let active: Promise<void> | void | undefined;
+  let pendingValue: T | undefined;
+
+  injector.get(DestroyRef).onDestroy(() => {
+    active = undefined;
+  });
+
+  const state = linkedSignal<
+    {value: T; thrown: false} | {error: unknown; thrown: true},
+    ResourceSnapshot<T>
+  >({
+    source: () => {
       try {
         setInParamsFunction(true);
-        return source();
+        return {value: source(), thrown: false};
+      } catch (err) {
+        rethrowFatalErrors(err);
+        return {error: err, thrown: true};
       } finally {
         setInParamsFunction(false);
       }
-    }),
-  });
-
-  let active: Promise<void> | void | undefined;
-  let pendingValue: T | undefined;
+    },
+    computation: (res, previous) => {
+      // If we already have a state from the effect or a previous read, keep it!
+      // The effect is responsible for timing and state transitions.
+      if (previous !== undefined) {
+        return previous.value;
+      }
 
-  injector.get(DestroyRef).onDestroy(() => {
-    active = undefined;
+      // On the very first evaluation, determine the initial state synchronously.
+      if (res.thrown) {
+        return {status: 'error', error: res.error as Error};
+      }
+      return {status: 'resolved', value: res.value};
+    },
   });
 
   effect(
@@ -82,7 +101,7 @@ export function debounced<T>(
 
       // Check if the value is the same as the previous one.
       const equal = options?.equal ?? Object.is;
-      if (currentState.status === 'reloading') {
+      if (currentState.status === 'reloading' || currentState.status === 'loading') {
         if (equal(value, pendingValue!)) return;
       } else if (currentState.status === 'resolved') {
         if (equal(value, currentState.value!)) return;
 
@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {ChangeDetectionStrategy, Component, debounced, resource, signal} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+
+import {form, FormField, validateAsync} from '../../public_api';
+
+describe('debounced inside validateAsync bug', () => {
+  it('should not throw a cycle error when using debounced in validateAsync factory', async () => {
+    @Component({
+      selector: 'debounce-bug',
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      template: ` <input [formField]="form.hello" /> `,
+      imports: [FormField],
+    })
+    class DebounceBug {
+      protected readonly model = signal({
+        hello: 'world',
+      });
+
+      protected readonly form = form(this.model, (path) => {
+        validateAsync(path.hello, {
+          params: ({value}) => value(),
+          factory: (params) => {
+            const debounce = debounced(params, 300);
+            return resource({
+              params: ({chain}) => chain(debounce),
+              loader: async ({params}) => {
+                return new Promise<string>((resolve) =>
+                  setTimeout(() => {
+                    resolve('hi');
+                  }, 400),
+                );
+              },
+            });
+          },
+          onSuccess: (response) => null,
+          onError: (error) => null,
+        });
+      });
+    }
+
+    const fixture = TestBed.createComponent(DebounceBug);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    // In a "zoneless and async-first" testing environment, just need to change something and wait
+    const input = fixture.nativeElement.querySelector('input');
+    input.value = 'hello!';
+    input.dispatchEvent(new Event('input'));
+    await fixture.whenStable();
+  });
+});