{"record":{"id":"4014924996299824","repo":"angular/components","slug":"mat-date-range-input-must-contain-a-matenddate-inp","errorCode":null,"errorMessage":"mat-date-range-input must contain a matEndDate input","messagePattern":"mat-date-range-input must contain a matEndDate input","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/datepicker/date-range-input.ts","lineNumber":323,"sourceCode":"   */\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\n  ngOnChanges(changes: SimpleChanges<this>) {\n    if (dateInputsHaveChanged(changes, this._dateAdapter)) {\n      this.stateChanges.next(undefined);\n    }","sourceCodeStart":305,"sourceCodeEnd":341,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/date-range-input.ts#L305-L341","documentation":"The counterpart to error 223: mat-date-range-input checks after content init that a matEndDate directive exists among its content children. Missing the end input means the range cannot be completed, so Material throws in dev mode.","triggerScenarios":"A <mat-date-range-input> containing a matStartDate input but no input carrying the matEndDate directive, or the end input removed/hidden via structural directives so it is not projected.","commonSituations":"Deleting or commenting out the second input during debugging; *ngIf hiding the end input permanently; typos like matEnd instead of matEndDate.","solutions":["Add matEndDate to the second <input matInput> inside mat-date-range-input.","If the inputs are conditionally rendered, ensure both are rendered together (e.g. wrap both in a single *ngIf container that still projects correctly).","Fix any misspelling of the matEndDate attribute."],"exampleFix":"// before\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input matInput [matStartDate]=\"range.start\">\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":"function hasEndDateDirective(el: HTMLElement): boolean {\n  return !!el.querySelector('input[matenddate]');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep the start/end input pair adjacent in the template and version them together.","Run a quick template grep for matStartDate/matEndDate pairs in code review.","Avoid *ngIf on a single side of the range; hide via CSS if needed."],"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"}