bug(COMPONENT): MatDatePicker

[FabioBuscaroli]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

MatDatePicker with Signal Forms keeps on showin matDatepickerParse error if delete with keyboard a valid date un char at the time.

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

Bind the control to a value.
Select or enter a valid date.
Erase the just entered date.
The forms has invalid()==false

Actual Behavior

Bind the control to a value.
Select or enter a valid date.
Erase the just entered date.
The forms has invalid()==true

Environment

• Angular: 22
• CDK/Material: 22
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[crisbeto]

Can you post a repro?

[FabioBuscaroli]

It seems that erasing the date char by char with backspace does not rise _validatorOnChange() when it's null or ''.
If i delete the date entirely overything is ok.

By the time i use this workaround:

import { Directive, HostListener, inject } from '@angular/core';
import { MatDatepickerInput, MatEndDate, MatStartDate } from '@angular/material/datepicker';

/** Callback Material date inputs expose so their validators can be re-run on demand. */
interface RevalidatableDateInput {
  _validatorOnChange: () => void;
}

/**
 * Works around a MatDatepicker/Signal Forms interop bug.
 *
 * `MatDatepickerInputBase._onInput()` only notifies its registered validator-change
 * callback from the branch it does not take when the parsed date is null. Signal
 * Forms recomputes CVA parse errors from that callback or from a model value
 * change, and neither happens while the user erases an unparseable date one
 * character at a time (the model is already `null`, so the signal write is a
 * no-op). The stale `matDatepickerParse` error therefore survives on an empty
 * field. Notifying on every keystroke re-runs the datepicker validators.
 */
@Directive({
  selector: 'input[matDatepicker], input[matStartDate], input[matEndDate]',
})
export class MatDatepickerParseErrorFixDirective {
   private readonly singleDate = inject<MatDatepickerInput<unknown>>(MatDatepickerInput, {
    optional: true,
    self: true,
  });
  private readonly startDate = inject<MatStartDate<unknown>>(MatStartDate, {
    optional: true,
    self: true,
  });
  private readonly endDate = inject<MatEndDate<unknown>>(MatEndDate, {
    optional: true,
    self: true,
  });

  /**
   * Re-runs the datepicker validators after Material has updated its internal
   * parse flag.
   *
   * @returns Nothing.
   */
  @HostListener('input')
  protected onInput(): void {
    // Deferred: Material updates `_lastValueValid` in its own `input` host
    // listener, and host listener order across directives is not guaranteed.
    queueMicrotask(() => this.revalidate());
  }

    /**
   * Notifies the validator-change callback of this input and, for range parts,
   * of the sibling input as well.
   *
   * @returns Nothing.
   */
  private revalidate(): void {
    const host = this.singleDate ?? this.startDate ?? this.endDate;
    if (!host) {
      return;
    }
    (host as unknown as RevalidatableDateInput)._validatorOnChange();

    const rangePart = this.startDate ?? this.endDate;
    if (!rangePart) {
      return;
    }
    const rangeInput = rangePart._rangeInput;
    const sibling = this.startDate ? rangeInput._endInput : rangeInput._startInput;
    (sibling as unknown as RevalidatableDateInput | undefined)?._validatorOnChange();
  }
}