{"record":{"id":"5c26146f596af816","repo":"angular/components","slug":"mat-date-range-input-must-contain-a-matstartdate-i","errorCode":null,"errorMessage":"mat-date-range-input must contain a matStartDate input","messagePattern":"mat-date-range-input must contain a matStartDate input","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/datepicker/date-range-input.ts","lineNumber":319,"sourceCode":"\n  /**\n   * Implemented as a part of `MatFormFieldControl`.\n   * @docs-private\n   */\n  onContainerClick(): void {\n    if (!this.focused && !this.disabled) {\n      if (!this._model || !this._model.selection.start) {\n        this._startInput.focus();\n      } else {\n        this._endInput.focus();\n      }\n    }\n  }\n\n  ngAfterContentInit() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this._startInput) {\n        throw Error('mat-date-range-input must contain a matStartDate input');\n      }\n\n      if (!this._endInput) {\n        throw Error('mat-date-range-input must contain a matEndDate input');\n      }\n    }\n\n    if (this._model) {\n      this._registerModel(this._model);\n    }\n\n    // We don't need to unsubscribe from this, because we\n    // know that the input streams will be completed on destroy.\n    merge(this._startInput.stateChanges, this._endInput.stateChanges).subscribe(() => {\n      this.stateChanges.next(undefined);\n    });\n  }\n","sourceCodeStart":301,"sourceCodeEnd":337,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/date-range-input.ts#L301-L337","documentation":"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.","triggerScenarios":"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).","commonSituations":"Copy-paste typos (matStart vs matStartDate); forgetting the directive on the first input after refactoring; conditionally rendering only the start input with *ngIf.","solutions":["Add the matStartDate directive to the first <input matInput> inside mat-date-range-input.","Verify the attribute is spelled exactly matStartDate (not matStart).","Ensure both inputs are directly projected children of mat-date-range-input, not inside ng-template or a non-projecting wrapper."],"exampleFix":"// before\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input matInput [matEndDate]=\"range.end\">\n  <input matInput [matEndDate]=\"range.end\">\n</mat-date-range-input>\n\n// after\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input matInput [matStartDate]=\"range.start\">\n  <input matInput [matEndDate]=\"range.end\">\n</mat-date-range-input>","handlingStrategy":"validation","validationCode":"// Template lint-time check: ensure the directive exists\nfunction hasStartDateDirective(el: HTMLElement): boolean {\n  return !!el.querySelector('input[matstartdate]');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use the Angular Material docs snippet for mat-date-range-input as the canonical template.","Enable template type-checking so missing directive bindings surface at compile time.","Never conditionally render only one of the two range inputs."],"tags":["angular-material","datepicker","template","validation"],"backgroundTag":"missing-required-template-directive","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}