{"record":{"id":"68e4826896c059c2","repo":"angular/components","slug":"attempted-to-open-an-matdatepicker-with-no-associa","errorCode":null,"errorMessage":"Attempted to open an MatDatepicker with no associated input.","messagePattern":"Attempted to open an MatDatepicker with no associated input\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/datepicker/datepicker-base.ts","lineNumber":652,"sourceCode":"   * @param portal Portal to be removed.\n   */\n  removeActions(portal: TemplatePortal): void {\n    if (portal === this._actionsPortal) {\n      this._actionsPortal = null;\n      this._componentRef?.instance._assignActions(null, true);\n    }\n  }\n\n  /** Open the calendar. */\n  open(): void {\n    // Skip reopening if there's an in-progress animation to avoid overlapping\n    // sequences which can cause \"changed after checked\" errors. See #25837.\n    if (this._opened || this.disabled || this._componentRef?.instance._isAnimating) {\n      return;\n    }\n\n    if (!this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw Error('Attempted to open an MatDatepicker with no associated input.');\n    }\n\n    this._focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();\n    this._openOverlay();\n    this._opened = true;\n    this.openedStream.emit();\n  }\n\n  /** Close the calendar. */\n  close(): void {\n    // Skip reopening if there's an in-progress animation to avoid overlapping\n    // sequences which can cause \"changed after checked\" errors. See #25837.\n    if (!this._opened || this._componentRef?.instance._isAnimating) {\n      return;\n    }\n\n    const canRestoreFocus =\n      this.restoreFocus &&","sourceCodeStart":634,"sourceCodeEnd":670,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/datepicker-base.ts#L634-L670","documentation":"open() refuses to open a datepicker that has no registered input. Material supports a programmatic-only picker, but then openedByInput must be used; a plain datepicker with no associated input cannot determine where to write values, so dev mode throws instead.","triggerScenarios":"Calling picker.open() programmatically when no input with [matDatepicker]=\"picker\" is registered (input not rendered yet, removed by *ngIf, or the picker never had an input and the programmatic-only flag wasn't honored).","commonSituations":"Opening the picker from a button click before the input's content is initialized; the input inside an *ngIf that hasn't rendered; sharing the picker reference from a detached template.","solutions":["Ensure an input with [matDatepicker]=\"picker\" exists and is registered before calling open().","If you want a calendar with no input, use the picker's programmatic-only setup (e.g. MatDatepicker with a calendar view / mat-calendar instead) rather than calling open().","Guard programmatic open calls with a check that the input binding has rendered (e.g. after ViewInit / inside ngAfterViewInit or with setTimeout/afterNextRender)."],"exampleFix":"// before\nclick() { this.picker.open(); } // input inside *ngIf may not exist\n\n// after\n@ViewChild('picker') picker: MatDatepicker<Date>;\nopenPicker() {\n  if (this.showInput && this.picker?.datepickerInput) this.picker.open();\n}","handlingStrategy":"try-catch","validationCode":"@ViewChild('picker') picker?: MatDatepicker<Date>;\nif (this.picker && (this.picker as any).datepickerInput) { /* safe to open */ }","typeGuard":"function canOpen(p: MatDatepicker<Date> | undefined): p is MatDatepicker<Date> & { datepickerInput: unknown } {\n  return !!p && !!(p as any).datepickerInput;\n}","tryCatchPattern":"try {\n  this.picker.open();\n} catch (e) {\n  if ((e as Error).message.includes('no associated input')) {\n    console.warn('Input not rendered yet; retry after view init');\n  } else { throw e; }\n}","preventionTips":["Call open() only from ngAfterViewInit or afterNextRender, not in constructors.","If the input is behind *ngIf, only open the picker while that branch is active.","For button-triggered pickers with no input, use mat-calendar or the picker's programmatic-only mode."],"tags":["angular-material","datepicker","lifecycle","programmatic-open"],"backgroundTag":"datepicker-missing-input","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-09-01T08:17:40.651Z"}