fix(forms): mark field as dirty when value is changed by ControlValueAccessor (#64471)

leonsenft · thePunderWoman · commit 505bde1fede9 · 2025-10-20T15:35:42.000Z
This corresponds with fixes made for native and custom signal form controls: #64483. PR Close #64471
diff --git a/packages/forms/signals/src/api/field_directive.ts b/packages/forms/signals/src/api/field_directive.ts
@@ -33,7 +33,7 @@ export const FIELD = new InjectionToken<Field<unknown>>(
  * Binds a form `FieldTree` 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
+ * 3. A component that provides a `ControlValueAccessor`. This should only be used for backwards
  *    compatibility with reactive forms. Prefer options (1) and (2).
  *
  * This directive has several responsibilities:
@@ -83,7 +83,11 @@ export class Field<T> implements ɵControl<T> {
 
   ɵinteropControlCreate() {
     const controlValueAccessor = this.controlValueAccessor!;
-    controlValueAccessor.registerOnChange((value: T) => this.state().value.set(value));
+    controlValueAccessor.registerOnChange((value: T) => {
+      const state = this.state();
+      state.value.set(value);
+      state.markAsDirty();
+    });
     controlValueAccessor.registerOnTouched(() => this.state().markAsTouched());
   }
 
diff --git a/packages/forms/signals/test/web/interop.spec.ts b/packages/forms/signals/test/web/interop.spec.ts
@@ -75,7 +75,7 @@ describe('ControlValueAccessor', () => {
 
     const fixture = act(() => TestBed.createComponent(TestCmp));
     const control = fixture.componentInstance.control;
-    const input = fixture.nativeElement.firstChild.firstChild;
+    const input = fixture.nativeElement.querySelector('input');
 
     // Initial state
     expect(control().value).toBe('test');
@@ -92,6 +92,29 @@ describe('ControlValueAccessor', () => {
     expect(fixture.componentInstance.f().value()).toBe('typing');
   });
 
+  it('should mark field dirty on changes', () => {
+    @Component({
+      imports: [Field, CustomControl],
+      template: `<custom-control [field]="f" />`,
+    })
+    class TestCmp {
+      f = form<string>(signal(''));
+    }
+
+    const fixture = act(() => TestBed.createComponent(TestCmp));
+    const input = fixture.nativeElement.querySelector('input');
+    const field = fixture.componentInstance.f;
+
+    expect(field().dirty()).toBe(false);
+
+    act(() => {
+      input.value = 'typing';
+      input.dispatchEvent(new Event('input'));
+    });
+
+    expect(field().dirty()).toBe(true);
+  });
+
   it('should propagate touched events to field', () => {
     @Component({
       imports: [Field, CustomControl],
@@ -102,7 +125,7 @@ describe('ControlValueAccessor', () => {
     }
 
     const fixture = act(() => TestBed.createComponent(TestCmp));
-    const input = fixture.nativeElement.firstChild.firstChild;
+    const input = fixture.nativeElement.querySelector('input');
     expect(fixture.componentInstance.f().touched()).toBe(false);
 
     act(() => input.dispatchEvent(new Event('blur')));
@@ -122,7 +145,7 @@ describe('ControlValueAccessor', () => {
     }
 
     const fixture = act(() => TestBed.createComponent(TestCmp));
-    const input = fixture.nativeElement.firstChild.firstChild;
+    const input = fixture.nativeElement.querySelector('input');
     expect(input.disabled).toBe(false);
 
     act(() => enabled.set(false));
@@ -181,7 +204,7 @@ describe('ControlValueAccessor', () => {
 
     const fixture = act(() => TestBed.createComponent(TestCmp));
     const control = fixture.componentInstance.control;
-    const input = fixture.nativeElement.firstChild.firstChild;
+    const input = fixture.nativeElement.querySelector('input');
 
     // Initial state
     expect(control().value).toBe('test');
