angular/components · error · Error

mat-date-range-input must contain a matStartDate input

Error message

mat-date-range-input must contain a matStartDate input

What it means

A mat-date-range-input directive requires two projected child inputs: one with matStartDate and one with matEndDate. After content init, if no MatStartDate directive was found among its content children, Angular Material throws this dev-mode error because the range input cannot function with only one bound.

Source

Thrown at src/material/datepicker/date-range-input.ts:319

  /**
   * Implemented as a part of `MatFormFieldControl`.
   * @docs-private
   */
  onContainerClick(): void {
    if (!this.focused && !this.disabled) {
      if (!this._model || !this._model.selection.start) {
        this._startInput.focus();
      } else {
        this._endInput.focus();
      }
    }
  }

  ngAfterContentInit() {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      if (!this._startInput) {
        throw Error('mat-date-range-input must contain a matStartDate input');
      }

      if (!this._endInput) {
        throw Error('mat-date-range-input must contain a matEndDate input');
      }
    }

    if (this._model) {
      this._registerModel(this._model);
    }

    // We don't need to unsubscribe from this, because we
    // know that the input streams will be completed on destroy.
    merge(this._startInput.stateChanges, this._endInput.stateChanges).subscribe(() => {
      this.stateChanges.next(undefined);
    });
  }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add the matStartDate directive to the first <input matInput> inside mat-date-range-input.
2. Verify the attribute is spelled exactly matStartDate (not matStart).
3. Ensure both inputs are directly projected children of mat-date-range-input, not inside ng-template or a non-projecting wrapper.

Example fix

// before
<mat-date-range-input [rangePicker]="picker">
  <input matInput [matEndDate]="range.end">
  <input matInput [matEndDate]="range.end">
</mat-date-range-input>

// after
<mat-date-range-input [rangePicker]="picker">
  <input matInput [matStartDate]="range.start">
  <input matInput [matEndDate]="range.end">
</mat-date-range-input>

// Template lint-time check: ensure the directive exists
function hasStartDateDirective(el: HTMLElement): boolean {
  return !!el.querySelector('input[matstartdate]');
}

When it happens

Trigger: Writing <mat-date-range-input> whose inner input lacks the matStartDate attribute directive (e.g. only matEndDate present, or plain matInput inputs), or wrapping the start input in a structural directive/template that prevents content projection (ng-template, *ngIf without ngProjectAs consideration).

Common situations: Copy-paste typos (matStart vs matStartDate); forgetting the directive on the first input after refactoring; conditionally rendering only the start input with *ngIf.

Related errors

• mat-date-range-input must contain a matEndDate input
• A MatDatepicker can only be associated with a single input.
• Invalid date "${date}". Reason: "${result.invalidReason}".
• MatDatepicker: No provider found for DateAdapter. You must a
• MatDatepicker: No provider found for MAT_DATE_FORMATS. You m

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/5c26146f596af816. Report an issue: GitHub.