I cannot validate date range inputs due to Date | null type of matStartDate and matEndDate.
My validator looks like this:

date-format-validator.ts:

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function dateValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (value !== null) {
      return null;
    }

    // Jeśli wartość jest obiektem Date, sprawdź jej poprawność
    if (
      Object.prototype.toString.call(value) === '[object Date]' &&
      !isNaN(value.getTime())
    ) {
      return null;
    }

    // Jeśli wartość jest ciągiem znaków, sprawdź format
    if (typeof value === 'string' && value.match(/^d{2}.d{2}.d{4}$/)) {
      const parts = value.split('.');
      if (parts.length === 3) {
        const day = +parts[0];
        const month = +parts[1] - 1;
        let year: number;
        if (parts[2].length <= 2) year = +parts[2] + 2000;
        else year = +parts[2];

        const date = new Date(year, month, day, 12);
        if (
          date &&
          date.getFullYear() === year &&
          date.getMonth() === month &&
          date.getDate() === day
        ) {
          return null;
        }
      }
    }

    return { invalidDateFormat: { value: control.value } };
  };
}

But since input type is Date | null, I cannot check what was particularly typed in the inputs. I need this information, because now I’m getting information that the form is invalid. I want the form to be invalid only when typed value is not Date, but it should be valid when input is empty and now it isn’t. The problem is, that empty input returns null, as is random string typed in inputs.

I’ve tried to change things in my custom date adapter, but it also must return Date | null.

calendar-date-formats.ts

import { DatePipe } from '@angular/common';
import { Injectable } from '@angular/core';
import { NativeDateAdapter } from '@angular/material/core';
import { MatDateFormats } from '@angular/material/core';

export const MY_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: 'dd.MM.yyyy',
  },
  display: {
    dateInput: 'customInput',
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};
@Injectable()
export class MyDateAdapter extends NativeDateAdapter {
  override parse(value: string): Date | null {
    const parts = value.split('.');
    if (parts.length === 3) {
      const day = +parts[0];
      const month = +parts[1] - 1;
      let year: number;
      console.log(+parts[2]);
      if (parts[2].length <= 2) year = +parts[2] + 2000;
      else {
        year = +parts[2];
      }

      return new Date(year, month, day, 12);
    }

    return null;
  }
  override format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'customInput') {
      const day = ('0' + date.getDate()).slice(-2);
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const year = date.getFullYear();
      return `${day}.${month}.${year}`;
    } else {
      const formattedDate = new DatePipe(this.locale).transform(
        date,
        'MMM yyyy'
      );
      return formattedDate ? formattedDate : '';
    }
  }
}

I just want form to be invalid only when string is typed to the input and not when input is empty.

process-search-options-dropdown.component.ts:

import { NgClass, registerLocaleData } from '@angular/common';
import {
  AfterViewInit,
  Component,
  ElementRef,
  inject,
  LOCALE_ID,
  model,
  Renderer2,
} from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  NgModel,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import {
  DateRange,
  MatDatepickerModule,
  MatDateRangePicker,
  DefaultMatCalendarRangeStrategy,
  MatRangeDateSelectionModel,
  MatDatepickerIntl,
} from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import {
  DateAdapter,
  MAT_DATE_LOCALE,
  MAT_DATE_FORMATS,
} from '@angular/material/core';
import localePl from '@angular/common/locales/pl';
import { MY_DATE_FORMATS, MyDateAdapter } from './calendar-date-formats';
import { MatInputModule } from '@angular/material/input';

import { dateValidator } from '../date-format-validator';
import { UpdateDateRangeValueAndValidityFixerDirective } from '../../../directives/update-date-range-value-and-validity-fixer.directive';

registerLocaleData(localePl);

@Component({
  selector: 'app-process-search-options-dropdown',
  standalone: true,
  imports: [
    MatIcon,
    NgClass,
    ReactiveFormsModule,
    MatCardModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatDateRangePicker,
    MatInputModule,
    UpdateDateRangeValueAndValidityFixerDirective,
  ],
  providers: [
    DefaultMatCalendarRangeStrategy,
    MatRangeDateSelectionModel,
    { provide: LOCALE_ID, useValue: 'pl-PL' },
    { provide: MAT_DATE_LOCALE, useValue: 'pl-PL' },
    { provide: DateAdapter, useClass: MyDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
  templateUrl: './process-search-options-dropdown.component.html',
  styleUrl: './process-search-options-dropdown.component.scss',
})
export class ProcessSearchOptionsDropdownComponent implements AfterViewInit {
  fromDate!: string | undefined;
  toDate!: string | undefined;
  isCalendarActive!: boolean;
  selectedDateField: string | null = null;
  selectedDateRange: DateRange<Date> | undefined;
  selectedDate = model<Date | null>(null);
  isActive = false;
  criteriaForm!: FormGroup;
  private readonly _intl = inject(MatDatepickerIntl);

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private fb: FormBuilder,
    private readonly selectionModel: MatRangeDateSelectionModel<Date>,
    private readonly selectionStrategy: DefaultMatCalendarRangeStrategy<Date>
  ) {
    this.criteriaForm = this.fb.group({
      defName: '',
      objectNumber: '',
      processInstId: '',
      performer: '',
      status: '',
      fromStartDate: [null, dateValidator()],
      toStartDate: [null, dateValidator()],
      fromFinishDate: [null, dateValidator()],
      toFinishDate: [null, dateValidator()],
    });
  }
  ngOnInit() {
    this.updateCloseButtonLabel('Zamknij kalendarz');
  }
  updateCloseButtonLabel(label: string) {
    this._intl.closeCalendarLabel = label;
    this._intl.changes.next();
  }
  ngAfterViewInit() {
    this.renderer.listen('document', 'click', (event: MouseEvent) => {
      this.handleDocumentClick(event);
    });
  }

  handleDocumentClick(event: MouseEvent) {
    if (
      this.isActive &&
      !this.el.nativeElement.contains(event.target) &&
      !this.isCalendarActive
    ) {
      this.closeDropdown();
    }
  }

  toggleDropdown(event: MouseEvent) {
    event.stopPropagation();
    this.isActive = !this.isActive;
  }

  closeDropdown() {
    this.isActive = false;
  }

  rangeChanged(selectedDate: Date) {
    const selection = this.selectionModel.selection,
      newSelection = this.selectionStrategy.selectionFinished(
        selectedDate,
        selection
      );

    this.selectionModel.updateSelection(newSelection, this);
    this.selectedDateRange = new DateRange<Date>(
      newSelection.start,
      newSelection.end
    );
  }

  onDatepickerOpened() {
    this.isCalendarActive = true;
  }

  onDatepickerClosed() {
    if (this.isCalendarActive) {
      this.isCalendarActive = false;
    }
  }
  formatDateToApi(date: Date): string {
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    return `${year}-${month}-${day}`;
  }
  onSubmit() {
    console.log(
      `Submitted form: ${this.criteriaForm.value}, invalid: ${this.criteriaForm.invalid}, n Data zakończenia: ${this.criteriaForm.value.fromFinishDate} - ${this.criteriaForm.value.toFinishDate}n Data rozpoczecia: ${this.criteriaForm.value.fromStartDate} - ${this.criteriaForm.value.toStartDate})`
    );
  }
}

process-search-options-dropdown.component.html:

<div class="drop-down" [ngClass]="{ active: isActive }">
  <button data-dropdown-button class="link" (click)="toggleDropdown($event)">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
  <div class="drop-down-menu">
    <form [formGroup]="criteriaForm" class="inputs" (ngSubmit)="onSubmit()">

      <div class="date-field">
        <mat-date-range-input
          mat-date-range-input
          [rangePicker]="pickerStartDate"
          class="range-inputs dropdown-date-range-picker-input"
          controlType="criteriaForm"
        >
          <input
            class="form-input range-input"
            placeholder="Od"
            formControlName="fromStartDate"
            matStartDate
          />
          <input
            class="form-input range-input"
            placeholder="Do"
            formControlName="toStartDate"
            matEndDate
          />
        </mat-date-range-input>
        <label class="date-label">Data rozpoczęcia</label>
        <button
          type="button"
          class="calendar-button"
          mat-raised-button
          (click)="pickerStartDate.open()"
        >
          <mat-icon class="calendar-icon">calendar_month</mat-icon>
        </button>
        <mat-date-range-picker
          #pickerStartDate
          (closed)="onDatepickerClosed()"
          (opened)="onDatepickerOpened()"
        ></mat-date-range-picker>
      </div>
      <div class="date-field">
        <mat-date-range-input
          mat-date-range-input
          [rangePicker]="pickerFinishDate"
          class="range-inputs dropdown-date-range-picker-input"
          controlType="criteriaForm"
        >
          <input
            class="form-input range-input"
            placeholder="Od"
            formControlName="fromFinishDate"
            matStartDate
          />
          <input
            mat-date-range-input
            class="form-input range-input"
            placeholder="Do"
            formControlName="toFinishDate"
            matEndDate
          />
        </mat-date-range-input>
        <label class="date-label">Data zakończenia</label>
        <button
          type="button"
          class="calendar-button"
          mat-raised-button
          (click)="pickerFinishDate.open()"
        >
          <mat-icon class="calendar-icon">calendar_month</mat-icon>
        </button>
        <mat-date-range-picker
          #pickerFinishDate
          (closed)="onDatepickerClosed()"
          (opened)="onDatepickerOpened()"
        ></mat-date-range-picker>
      </div>

      <div class="submit-btn">
        <button class="basic-button" type="submit">Zapisz</button>
      </div>
    </form>
  </div>
</div>