fix(forms): debounce updates from interop controls

leonsenft · thePunderWoman · commit d89e522a1f07 · 2025-11-17T16:37:29.000Z
* Apply any debounce rules to updates from interop controls (if configured). * Add tests to ensure debouncing works for all control types (native, custom, and interop). (cherry picked from commit b1037ec)
diff --git a/packages/core/src/render3/instructions/control.ts b/packages/core/src/render3/instructions/control.ts
@@ -271,11 +271,7 @@ function listenToCustomControl(
  */
 function listenToInteropControl(control: ɵControl<unknown>): void {
   const interopControl = control.ɵinteropControl!;
-  interopControl.registerOnChange((value: unknown) => {
-    const state = control.state();
-    state.value.set(value);
-    state.markAsDirty();
-  });
+  interopControl.registerOnChange((value: unknown) => control.state().setControlValue(value));
   interopControl.registerOnTouched(() => control.state().markAsTouched());
 }
 
diff --git a/packages/forms/signals/test/web/field_directive.spec.ts b/packages/forms/signals/test/web/field_directive.spec.ts
@@ -23,6 +23,7 @@ import {
 } from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {
+  debounce,
   disabled,
   Field,
   form,
@@ -1969,6 +1970,67 @@ describe('field directive', () => {
         .toEqual(Node.DOCUMENT_POSITION_PRECEDING);
     });
   });
+
+  describe('debounce', () => {
+    it('should support native control', async () => {
+      const {promise, resolve} = promiseWithResolvers<void>();
+
+      @Component({
+        imports: [Field],
+        template: `<input [field]="f" />`,
+      })
+      class TestCmp {
+        readonly f = form(signal(''), (p) => {
+          debounce(p, () => promise);
+        });
+      }
+
+      const fixture = act(() => TestBed.createComponent(TestCmp));
+      const input = fixture.nativeElement.querySelector('input');
+
+      act(() => {
+        input.value = 'typing';
+        input.dispatchEvent(new Event('input'));
+      });
+      expect(fixture.componentInstance.f().value()).toBe('');
+
+      resolve();
+      await promise;
+      expect(fixture.componentInstance.f().value()).toBe('typing');
+    });
+
+    it('should support custom control', async () => {
+      const {promise, resolve} = promiseWithResolvers<void>();
+
+      @Component({
+        selector: 'my-input',
+        template: '<input #i [value]="value()" (input)="value.set(i.value)" />',
+      })
+      class CustomInput implements FormValueControl<string> {
+        value = model('');
+      }
+
+      @Component({
+        imports: [Field, CustomInput],
+        template: `<my-input [field]="f" />`,
+      })
+      class TestCmp {
+        readonly f = form(signal(''), (p) => {
+          debounce(p, () => promise);
+        });
+        readonly customInput = viewChild.required(CustomInput);
+      }
+
+      const fixture = act(() => TestBed.createComponent(TestCmp));
+
+      act(() => fixture.componentInstance.customInput().value.set('typing'));
+      expect(fixture.componentInstance.f().value()).toBe('');
+
+      resolve();
+      await promise;
+      expect(fixture.componentInstance.f().value()).toBe('typing');
+    });
+  });
 });
 
 function setupRadioGroup() {
@@ -2005,3 +2067,25 @@ function act<T>(fn: () => T): T {
     TestBed.tick();
   }
 }
+
+/**
+ * Replace with `Promise.withResolvers()` once it's available.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers.
+ */
+// TODO: share this with submit.spec.ts
+function promiseWithResolvers<T = void>(): {
+  promise: Promise<T>;
+  resolve: (value: T | PromiseLike<T>) => void;
+  reject: (reason?: any) => void;
+} {
+  let resolve!: (value: T | PromiseLike<T>) => void;
+  let reject!: (reason?: any) => void;
+
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  return {promise, resolve, reject};
+}
diff --git a/packages/forms/signals/test/web/interop.spec.ts b/packages/forms/signals/test/web/interop.spec.ts
@@ -8,7 +8,7 @@
 
 import {Component, inject, signal, provideZonelessChangeDetection, viewChild} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl} from '@angular/forms';
-import {disabled, Field, form} from '@angular/forms/signals';
+import {debounce, disabled, Field, form} from '@angular/forms/signals';
 import {TestBed} from '@angular/core/testing';
 
 describe('ControlValueAccessor', () => {
@@ -92,6 +92,34 @@ describe('ControlValueAccessor', () => {
     expect(fixture.componentInstance.f().value()).toBe('typing');
   });
 
+  it('should support debounce', async () => {
+    const {promise, resolve} = promiseWithResolvers<void>();
+
+    @Component({
+      imports: [CustomControl, Field],
+      template: `<custom-control [field]="f" />`,
+    })
+    class TestCmp {
+      readonly f = form(signal(''), (p) => {
+        debounce(p, () => promise);
+      });
+      readonly control = viewChild.required(CustomControl);
+    }
+
+    const fixture = act(() => TestBed.createComponent(TestCmp));
+    const input = fixture.nativeElement.querySelector('input');
+
+    act(() => {
+      input.value = 'typing';
+      input.dispatchEvent(new Event('input'));
+    });
+    expect(fixture.componentInstance.f().value()).toBe('');
+
+    resolve();
+    await promise;
+    expect(fixture.componentInstance.f().value()).toBe('typing');
+  });
+
   it('should mark field dirty on changes', () => {
     @Component({
       imports: [Field, CustomControl],
@@ -286,3 +314,25 @@ function act<T>(fn: () => T): T {
     TestBed.tick();
   }
 }
+
+/**
+ * Replace with `Promise.withResolvers()` once it's available.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers.
+ */
+// TODO: share this with submit.spec.ts
+function promiseWithResolvers<T = void>(): {
+  promise: Promise<T>;
+  resolve: (value: T | PromiseLike<T>) => void;
+  reject: (reason?: any) => void;
+} {
+  let resolve!: (value: T | PromiseLike<T>) => void;
+  let reject!: (reason?: any) => void;
+
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  return {promise, resolve, reject};
+}
