fix(forms): prevent date inputs from being marked dirty on init

Signal Forms inputs that require validity tracking were being marked `dirty()` on component initialization, before any user interaction. This caused validation error  messages and invalid/valid styling to appear immediately on load.

Fix: angular#69632

Author: MeAkib

packages/forms/signals/src/directive/control_native.ts

@@ -30,6 +30,7 @@ import {
   setNativeDomProperty,
 } from './native';
 import {observeSelectMutations} from './select';
+import {ControlValueSignal} from '../field/node';
 
 export function nativeControlCreate(
   host: ControlDirectiveHost,
@@ -47,7 +48,8 @@ export function nativeControlCreate(
     // Read from the model value
     () => parent.state().value(),
     // Write to the buffered "control value"
-    (rawValue: unknown) => parent.state().controlValue.set(rawValue),
+    (rawValue: unknown, markAsDirty: boolean) =>
+      (parent.state().controlValue as ControlValueSignal<unknown>).set(rawValue, markAsDirty),
     // Our parse function doesn't care about the raw value that gets passed in,
     // It just reads the newly parsed value directly off the input element.
     (_rawValue: unknown) => getNativeControlValue(input, parent.state().value, validityMonitor),
@@ -66,7 +68,9 @@ export function nativeControlCreate(
 
   // TODO: move extraction to first update pass?
   if (isInput(input) && inputRequiresValidityTracking(input)) {
-    validityMonitor.watchValidity(parent.destroyRef, input, () => parser.setRawValue(undefined));
+    validityMonitor.watchValidity(parent.destroyRef, input, () =>
+      parser.setRawValue(undefined, false),
+    );
   }
 
   parent.registerAsBinding();

packages/forms/signals/src/field/node.ts

@@ -55,6 +55,7 @@ import {ValidationState} from './validation';
 
 export interface ControlValueSignal<T> extends WritableSignal<T> {
   rawSet(value: T): void;
+  set(value: T, markAsDirty?: boolean): void;
 }
 
 /**
@@ -117,8 +118,7 @@ export class FieldNode implements FieldState<unknown> {
    * first focusable binding in the DOM for any descendant node of this one.
    */
   private getBindingForFocus():
-    | (FormField<unknown> & {focus: (options?: FocusOptions) => void})
-    | undefined {
+    (FormField<unknown> & {focus: (options?: FocusOptions) => void}) | undefined {
     // First try to focus one of our own bindings.
     const own = this.formFieldBindings()
       .filter(
@@ -382,11 +382,13 @@ export class FieldNode implements FieldState<unknown> {
     const controlValue = linkedSignal(this.value) as ControlValueSignal<unknown>;
 
     controlValue.rawSet = controlValue.set;
-    controlValue.set = (newValue) => {
+    controlValue.set = (newValue, markAsDirty = true) => {
       // We intentionally allow same-value updates here to ensure that setting the control value
       // (even to the same value) still marks the control as dirty.
       controlValue.rawSet(newValue);
-      this.markAsDirty();
+      if (markAsDirty) {
+        this.markAsDirty();
+      }
       this.debounceSync();
     };
     const rawUpdate = controlValue.update;

packages/forms/signals/src/util/parser.ts

@@ -23,7 +23,7 @@ export interface Parser<TRaw> {
   /**
    * Parses the given raw value and updates the underlying model value if successful.
    */
-  setRawValue: (rawValue: TRaw) => void;
+  setRawValue: (rawValue: TRaw, markAsDirty?: boolean) => void;
   /**
    * Resets the parser errors.
    */
@@ -40,7 +40,7 @@ export interface Parser<TRaw> {
  */
 export function createParser<TValue, TRaw>(
   getValue: () => TValue,
-  setValue: (value: TValue) => void,
+  setValue: (value: TValue, markAsDirty: boolean) => void,
   parse: (raw: TRaw) => ParseResult<TValue>,
 ): Parser<TRaw> {
   const errors = linkedSignal({
@@ -49,11 +49,11 @@ export function createParser<TValue, TRaw>(
     equal: shallowArrayEquals,
   });
 
-  const setRawValue = (rawValue: TRaw) => {
+  const setRawValue = (rawValue: TRaw, markAsDirty = true) => {
     const result = parse(rawValue);
     errors.set(normalizeErrors(result.error));
     if (result.value !== undefined) {
-      setValue(result.value);
+      setValue(result.value, markAsDirty);
     }
     // `errors` is a linked signal sourced from the model value; write parse errors after
     // model updates so `{value, errors}` results do not get reset by the recomputation.

packages/forms/signals/test/web/form_field.spec.ts

@@ -5791,6 +5791,30 @@ describe('field directive', () => {
 
       expect(field().dirty()).toBe(true);
     });
+
+    it('native date input is not dirty after initial validity animation', () => {
+      @Component({
+        imports: [FormField],
+        template: `<input type="date" [formField]="f" />`,
+      })
+      class TestCmp {
+        f = form(signal(''), (p) => {
+          required(p, {message: 'required field'});
+        });
+      }
+
+      const fix = act(() => TestBed.createComponent(TestCmp));
+      const input = fix.nativeElement.firstChild as HTMLInputElement;
+      const field = fix.componentInstance.f;
+
+      expect(field().dirty()).toBe(false);
+      act(() => {
+        input.dispatchEvent(
+          new AnimationEvent('animationstart', {animationName: 'ng-invalid', bubbles: true}),
+        );
+      });
+      expect(field().dirty()).toBe(false);
+    });
   });
 
   it('should throw for invalid field directive host', () => {