fix(material/datepicker): update parse error with signal forms when value stays null (#33951)

When the user types an unparseable value into an empty datepicker input, or erases an
unparseable value, the model value stays `null`. Reactive forms re-run the validators on
every `setValue`, but signal forms skip writes that don't change the value, so the
`matDatepickerParse` error was neither added nor cleared in those cases.

Notify the forms module that the validators changed whenever the parse state flips while
the value stays the same, including the `null` to `null` case.

Fixes #33740.

Author: shteynu

src/material/datepicker/datepicker-input-base.ts

@@ -341,10 +341,13 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
       if (value && !this.value) {
         this._cvaOnChange(date);
       }
+    }
 
-      if (lastValueWasValid !== this._lastValueValid) {
-        this._validatorOnChange();
-      }
+    // Re-run the validators if the parse state changed while the value stayed the same.
+    // This also covers going from one null to another (e.g. clearing an unparseable value),
+    // because signal forms skip value writes that don't change the value.
+    if (!hasChanged && lastValueWasValid !== this._lastValueValid) {
+      this._validatorOnChange();
     }
 
     if (hasChanged) {

src/material/datepicker/datepicker.spec.ts

@@ -13,6 +13,7 @@ import {createCloseScrollStrategy} from '@angular/cdk/overlay';
 import {_supportsShadowDom} from '@angular/cdk/platform';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
+  clearElement,
   createKeyboardEvent,
   dispatchEvent,
   dispatchFakeEvent,
@@ -41,6 +42,7 @@ import {
   ReactiveFormsModule,
   Validator,
 } from '@angular/forms';
+import {FormField, form} from '@angular/forms/signals';
 import {By} from '@angular/platform-browser';
 import {Subject} from 'rxjs';
 import {MATERIAL_ANIMATIONS, MAT_DATE_LOCALE, provideNativeDateAdapter} from '../core';
@@ -1102,6 +1104,47 @@ describe('MatDatepicker', () => {
       });
     });
 
+    describe('datepicker with signal forms', () => {
+      let fixture: ComponentFixture<DatepickerWithSignalForms>;
+      let input: HTMLInputElement;
+
+      beforeEach(() => {
+        fixture = createComponent(DatepickerWithSignalForms, [provideNativeDateAdapter()]);
+        fixture.detectChanges();
+        input = fixture.nativeElement.querySelector('input');
+      });
+
+      function hasParseError() {
+        return fixture.componentInstance
+          .dateForm()
+          .errors()
+          .some(error => error.kind === 'matDatepickerParse');
+      }
+
+      it('should set the matDatepickerParse error when an invalid value is typed into an empty input', () => {
+        expect(hasParseError()).toBe(false);
+
+        typeInElement(input, 'foo');
+        fixture.detectChanges();
+
+        expect(hasParseError()).toBe(true);
+      });
+
+      it('should clear the matDatepickerParse error when an invalid value is erased', () => {
+        fixture.componentInstance.dateForm().value.set(new Date(2017, JAN, 1));
+        fixture.detectChanges();
+        expect(hasParseError()).toBe(false);
+
+        typeInElement(input, 'foo');
+        fixture.detectChanges();
+        expect(hasParseError()).toBe(true);
+
+        clearElement(input);
+        fixture.detectChanges();
+        expect(hasParseError()).toBe(false);
+      });
+    });
+
     describe('datepicker with mat-datepicker-toggle', () => {
       let fixture: ComponentFixture<DatepickerWithToggle>;
       let testComponent: DatepickerWithToggle;
@@ -2515,6 +2558,17 @@ class DatepickerWithNgModel {
   @ViewChild(MatDatepickerInput) datepickerInput!: MatDatepickerInput<Date>;
 }
 
+@Component({
+  template: `
+    <input [formField]="dateForm" [matDatepicker]="d">
+    <mat-datepicker #d></mat-datepicker>
+  `,
+  imports: [MatDatepickerInput, MatDatepicker, FormField],
+})
+class DatepickerWithSignalForms {
+  readonly dateForm = form(signal<Date | null>(null));
+}
+
 @Component({
   template: `
     <input [formControl]="formControl" [matDatepicker]="d">