{"record":{"id":"2db027c96bbb3f54","repo":"angular/components","slug":"cannot-specify-both-the-options-and-interval-i","errorCode":null,"errorMessage":"Cannot specify both the `options` and `interval` inputs at the same time","messagePattern":"Cannot specify both the `options` and `interval` inputs at the same time","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/timepicker/timepicker.ts","lineNumber":225,"sourceCode":"    alias: 'aria-labelledby',\n  });\n\n  /** Whether the timepicker is currently disabled. */\n  readonly disabled: Signal<boolean> = computed(() => !!this._input()?.disabled());\n\n  /** Classes to be passed to the timepicker panel. */\n  readonly panelClass = input<string | string[]>();\n\n  constructor() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      validateAdapter(this._dateAdapter, this._dateFormats);\n\n      effect(() => {\n        const options = this.options();\n        const interval = this.interval();\n\n        if (options !== null && interval !== null) {\n          throw new Error(\n            'Cannot specify both the `options` and `interval` inputs at the same time',\n          );\n        } else if (options?.length === 0) {\n          throw new Error('Value of `options` input cannot be an empty array');\n        }\n      });\n    }\n\n    // Since the panel ID is static, we can set it once without having to maintain a host binding.\n    const element = inject<ElementRef<HTMLElement>>(ElementRef);\n    element.nativeElement.setAttribute('mat-timepicker-panel-id', this.panelId);\n    this._handleLocaleChanges();\n    this._handleInputStateChanges();\n    this._keyManager.change.subscribe(() =>\n      this._activeDescendant.set(this._keyManager.activeItem?.id || null),\n    );\n  }\n","sourceCodeStart":207,"sourceCodeEnd":243,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/timepicker/timepicker.ts#L207-L243","documentation":"MatTimepicker accepts either a fixed `options` array or an `interval` for generating time options, but not both. A reactive effect in the constructor watches both inputs and throws as soon as both are non-null, since the resulting option list would be ambiguous.","triggerScenarios":"Template binds both inputs, e.g. `<mat-timepicker [options]=\"opts\" [interval]=\"'30m'\">`, or code sets the second input via setInput while the first is still set (including signal defaults where both are non-null).","commonSituations":"Copy-pasting examples that each use a different input; refactoring from interval to options without removing the old binding; TestBench/component harness tests calling setInput twice.","solutions":["Remove either the [options] or [interval] binding so only one remains","If both are computed dynamically, null out one before setting the other (e.g. this.options.set(null))","Centralize the choice in a single computed signal that exposes exactly one non-null value"],"exampleFix":"// before\n<mat-timepicker [options]=\"options\" [interval]=\"'30m'\"></mat-timepicker>\n\n// after\n<mat-timepicker [options]=\"options\"></mat-timepicker>\n// or\n<mat-timepicker [interval]=\"'30m'\"></mat-timepicker>","handlingStrategy":"validation","validationCode":"// Validate before binding\nfunction pickTimeConfig(options: T[] | null, interval: string | null) {\n  if (options !== null && interval !== null) {\n    throw new Error('Pass either options or interval, not both');\n  }\n  return {options, interval};\n}","typeGuard":null,"tryCatchPattern":"try {\n  this.timepickerOptions = options();\n  this.timepickerInterval = interval();\n} catch (e) {\n  if (String(e?.message).includes('`options` and `interval`')) {\n    this.timepickerInterval = null; // prefer options\n  }\n}","preventionTips":["Bind only one of [options] / [interval] per mat-timepicker","Null out the other input when switching modes","Enforce exclusivity in a single source-of-truth signal/config object","Add a lint/test asserting templates don't contain both bindings"],"tags":["angular-material","timepicker","input-validation","dev-mode"],"backgroundTag":"conflicting-inputs","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}