fix(forms): mark field as dirty when value is changed by a bound control (#64483)

leonsenft · thePunderWoman · commit 3529877772f7 · 2025-10-17T16:02:16.000Z
Fix #64465. Fix #63623. PR Close #64483
diff --git a/packages/core/src/render3/instructions/control.ts b/packages/core/src/render3/instructions/control.ts
@@ -221,7 +221,9 @@ function listenToCustomControl(
     outputName,
     outputName,
     wrapListener(tNode, lView, (newValue: unknown) => {
-      control.state().value.set(newValue);
+      const state = control.state();
+      state.value.set(newValue);
+      state.markAsDirty();
     }),
   );
 
@@ -279,8 +281,9 @@ function listenToNativeControl(lView: LView<{} | null>, tNode: TNode, control: 
   const renderer = lView[RENDERER];
   const inputListener = () => {
     const element = getNativeByTNode(tNode, lView) as NativeControlElement;
-    const value = control.state().value;
-    value.set(getNativeControlValue(element, value));
+    const state = control.state();
+    state.value.set(getNativeControlValue(element, state.value));
+    state.markAsDirty();
   };
   listenToDomEvent(
     tNode,
diff --git a/packages/forms/signals/test/web/field_directive.spec.ts b/packages/forms/signals/test/web/field_directive.spec.ts
@@ -1283,6 +1283,62 @@ describe('field directive', () => {
     });
   });
 
+  describe('should be marked dirty by user interaction', () => {
+    it('native control', () => {
+      @Component({
+        imports: [Field],
+        template: `<input [field]="f">`,
+      })
+      class TestCmp {
+        f = form(signal(''));
+      }
+
+      const fixture = act(() => TestBed.createComponent(TestCmp));
+      const input = fixture.nativeElement.firstChild as HTMLInputElement;
+      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('custom control', () => {
+      @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 {
+        f = form<string>(signal(''));
+      }
+
+      const fixture = act(() => TestBed.createComponent(TestCmp));
+      const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+      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 throw for invalid field directive host', () => {
     @Component({
       imports: [Field],
