refactor(forms): add support for binding number fields to date inputs (angular#63585)

In addition to `value` and `valueAsDate`, the date type fields work with
`valueAsNumber` as well, treating it as epoch miliseconds.

PR Close angular#63585

Author: mmalerba

packages/forms/signals/src/controls/control.ts

@@ -198,6 +198,7 @@ export class Control<T> {
           break;
         case 'number':
         case 'range':
+        case 'datetime-local':
           // We can read a `number` or a `string` from this input type.
           // Prefer whichever is consistent with the current type.
           if (typeof this.state().value() === 'number') {
@@ -210,10 +211,12 @@ export class Control<T> {
         case 'month':
         case 'week':
         case 'time':
-          // We can read a `Date | null` or a `string` from this input type.
+          // We can read a `Date | null` or a `number` or a `string` from this input type.
           // Prefer whichever is consistent with the current type.
           if (isDateOrNull(this.state().value())) {
             this.state().value.set((input as HTMLInputElement).valueAsDate as T);
+          } else if (typeof this.state().value() === 'number') {
+            this.state().value.set((input as HTMLInputElement).valueAsNumber as T);
           } else {
             this.state().value.set(input.value as T);
           }
@@ -274,7 +277,8 @@ export class Control<T> {
         break;
       case 'number':
       case 'range':
-        // This input typr can receive a `number` or a `string`.
+      case 'datetime-local':
+        // This input type can receive a `number` or a `string`.
         this.maybeSynchronize(
           () => this.state().value(),
           (value) => {
@@ -290,12 +294,14 @@ export class Control<T> {
       case 'month':
       case 'week':
       case 'time':
-        // This input typr can receive a `Date | null` or a `string`.
+        // This input type can receive a `Date | null` or a `number` or a `string`.
         this.maybeSynchronize(
           () => this.state().value(),
           (value) => {
             if (isDateOrNull(value)) {
               (input as HTMLInputElement).valueAsDate = value;
+            } else if (typeof value === 'number') {
+              (input as HTMLInputElement).valueAsNumber = value;
             } else {
               input.value = value as string;
             }

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

@@ -686,6 +686,64 @@ describe('control directive', () => {
       expect(cmp.f().value()).toEqual(new Date('2026-03-03T00:00:00.000Z'));
     });
 
+    it('should sync number field with date type input', () => {
+      @Component({
+        imports: [Control],
+        template: `<input type="date" [control]="f">`,
+      })
+      class TestCmp {
+        f = form(signal(new Date('2024-01-01T12:00:00Z').valueOf()));
+      }
+
+      const fix = act(() => TestBed.createComponent(TestCmp));
+      const input = fix.nativeElement.firstChild as HTMLInputElement;
+      const cmp = fix.componentInstance as TestCmp;
+
+      // Initial state
+      expect(input.value).toBe('2024-01-01');
+
+      // Model -> View
+      act(() => cmp.f().value.set(new Date('2025-02-02T12:00:00Z').valueOf()));
+      expect(input.value).toBe('2025-02-02');
+
+      // View -> Model
+      act(() => {
+        input.value = '2026-03-03';
+        input.dispatchEvent(new Event('input'));
+      });
+      expect(cmp.f().value()).toBe(new Date('2026-03-03T00:00:00.000Z').valueOf());
+    });
+
+    it('should sync number field with datetime-local type input', () => {
+      @Component({
+        imports: [Control],
+        template: `<input type="datetime-local" [control]="f">`,
+      })
+      class TestCmp {
+        f = form(signal(new Date('2024-01-01T12:30:00Z').valueOf()));
+      }
+
+      const fix = act(() => TestBed.createComponent(TestCmp));
+      const input = fix.nativeElement.firstChild as HTMLInputElement;
+      const cmp = fix.componentInstance as TestCmp;
+
+      // Initial state
+      expect(input.valueAsNumber).toBe(new Date('2024-01-01T12:30:00Z').valueOf());
+
+      // Model -> View
+      let newDateTimestamp = new Date('2025-02-02T18:45:00Z').valueOf();
+      act(() => cmp.f().value.set(newDateTimestamp));
+      expect(input.valueAsNumber).toBe(newDateTimestamp);
+
+      // View -> Model
+      newDateTimestamp = new Date('2026-03-03T09:15:00Z').valueOf();
+      act(() => {
+        input.valueAsNumber = newDateTimestamp;
+        input.dispatchEvent(new Event('input'));
+      });
+      expect(cmp.f().value()).toBe(newDateTimestamp);
+    });
+
     it('should sync string field with color type input', () => {
       @Component({
         imports: [Control],